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

因为要做一个地图服务类的子模块，找了很多信息，开始想到了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)' οnclick='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 >