51ditu maps API 使用——显示所有信息——点击链接显示对应标记浮窗[修]

来源：互联网发布：兰州连锁软件编辑：程序博客网时间：2024/06/04 23:27

因为要做一个地图服务类的子模块，找了很多信息，开始想到了GIS，后来发现人的无知真的会使其变得很愚蠢，等我学会GIS整个项目都做完了。百度，google，发现51地图很好，到官网逛了逛，又发现还有开发API，咿，小心肝扑扑嘞~~

感谢晨晨，在晨晨小站上我真的学到很多东西。只是一直有个问题，在显示所有信息的时候我想当用户点击左边的<A>链接后地图上即显示其浮窗信息。原效果（晨晨小站上的demo）如下：

http://www.chenchenmap.cn/demo3/showall.asp

我修改了一下代码，如下(代码复制后可直接运行)：51ditu Maps API 类参考文档

因为初次接触，所以添了注释，大家互相学习，(*^__^*) 嘻嘻……

附：

晨晨小站 http://www.chenchenmap.cn

51 ditu Maps API 类参考文档http://api.51ditu.com/docs/mapsapi/reference.html

<html>
<head>
<title>显示所有信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<style>
#showName ul {margin:0;padding:5px;}
</style>
</head>
<body>
<table width="780" align="center" bgcolor="#000000" cellspacing="1">
<tr bgcolor="skyblue"><td align="center" colspan="2"><b>设备详细信息</b></td></tr>
<tr bgcolor="#FFFFFF"><td align="center" width="100">名称:</td><td width="680">显示所有标注</td></tr>
<tr bgcolor="#FFFFFF"><td colspan="2">
<div style="width:780px;height:500px;" id="mapDiv"></div>

</td></tr>
<tr bgcolor="#FFFFFF"><td align="center">说明:</td><td>显示所有设备信息</td></tr>
<tr bgcolor="#FFFFFF"><td align="right" colspan="2"><a href="index.asp">返回列表页面</a></td></tr>
<tr bgcolor=#FFFFFF><td colspan=2>没有数据</td></tr>
</table>
<div id="showName" style="width:100px;height:300px;border:1px solid #FF3333;font-size:12px;background-color:#D4D4D4">test</div>
<script language="javascript">
//设置弹出信息浮窗
function getClickCallBack(marker,html,title)
{
    return function(){a=marker.openInfoWinHtml(html );a.setTitle(title)} ;
}
//新建地图对象
var map=new LTMaps(document.getElementById("mapDiv"));    //设置需要显示地图的层ID
    map.addControl(new LTStandMapControl());    //实例化地图导航控件
    map.addControl(new LTOverviewMapControl());    //实例化鹰眼控件

//初始化标注信息相关变量
var points=[];
var names=[];
var contents=[];
//-------------------标注信息 Start---------------------------
     points.push(new LTPoint(12030070,3157892));
     names.push("test");
     contents.push('地址:3333dfdf');

     points.push(new LTPoint(11981485,3135590));
     names.push("移动营业厅One");
     contents.push('地址:3333haha哈');
//-------------------标注信息 End  ---------------------------

//得到可以显示所有标注的最佳缩放等级
     map.getBestMap(points);
var scaleControl=new LTScaleControl();    //实例化比例尺控件,实时显示地图比例尺
    scaleControl.setLeft(10);    //设置比例尺左边距
    scaleControl.setBottom(20);    //设置比例尺下边距
    map.addControl(scaleControl);    //向地图添加一个比例尺控件

    for(var i=0;i<points.length;i++)
        {
            var marker = new LTMarker( points[i] );
            map.addOverLay( marker );
            var html=contents[i];
            var mapText=new LTMapText(marker);
            mapText.setLabel(names[i]);
            map.addOverLay(mapText);
            var title=names[i];
            //
            LTEvent.addListener( marker , "click" ,getClickCallBack(marker,html,title));
    }
    //函数功能：当点击左侧地名链接时，随即在地图上显示其浮窗信息
    //思路：新创建一个标注控件，并使其为不可见，其实显示的信息是新创建标注的浮窗信息，
    //      试过很多方法行不通，这个也只是一个折中的解决方法。
    function onNamesClick(point2,html2,title2)
    {
        var marker=new LTMarker(point2);    //在原point[i]上新实例化一个图形标注
        map.addOverLay(marker);    //在地图上创建一个图形标注
        marker.setVisible(0);    //设置标注不可见
        var infowin=marker.openInfoWinHtml(html2);    //浮窗内容
        infowin.setTitle(title2);    //浮窗标题
    }
    var htm=" ";
    function showName(){
        for (var i=0;i<names.length;i++)
        {

            htm+="<li><a href='javascript:void(0)' onclick='map.moveToCenter(points["+i+"]);onNamesClick(points["+i+"],contents["+i+"],names["+i+"])'>"+names[i]+"</a></li>";
        }
    }
showName();
//输出标注地名列表
document.getElementById("showName").innerHTML="<ul>"+htm+"</ul>";
var selfShowName=new LTHtmlElementControl(document.getElementById("showName"));
selfShowName.setRight(0);
map.addControl(selfShowName);
</script>
</body>
</html>