实现51Map地图接口

51Map免费提供了地图接口以下是调用接口并且实现地理位置标注，存储,修改和回显功能。 
51地图网址：http://api.51ditu.com/ 

在网页中引入

Js代码 

1. <script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script>  

在地图上标注： 

Js代码 

1.     //地图标注  
2. $(document).ready(function(){  
3.     var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);  
4.     var map=new LTMaps("mapdiv");//地图对象  
5.     var controlB;       //标记控件  
6.     map.centerAndZoom("tianjin",5);//天津  
7.     map.handleMouseScroll();//鼠标滚轮  
8.     var controlZoom = new LTStandMapControl();//缩放控件  
9.     map.addControl( controlZoom );  
10.     controlB = new LTMarkControl();//添加标注控件并把事件绑定到按钮  
11.     controlB.setVisible(false);  
12.     document.getElementById("addPosition").onclick=function (){controlB.btnClick()};  
13.     map.addControl( controlB );  
14.     LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );  
15. })  

Js代码 

1. //添加标注时执行此函数  
2. function getPoi(controlB){  
3.     var poi = controlB.getMarkControlPoint();  
4.     $("#x").val(poi.getLongitude()); //x,y为input标签id通过它传入后台储存位置  
5.     $("#y").val(poi.getLatitude());  
6. }  

Html代码 

1. <div id="mapdiv" style="width: 300px; height: 200px; position:static;">  
2.                                 <div align="center" style="margin: 12px;">  
3.                                 <a   href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank"  
4.                                     style="color: #D01E14; font-weight: bolder; font-size: 12px;">看不到地图请点这里</a>  
5.                                 </div>  
6.                             </div>  

在读图上回显标注： 

Js代码 

1. //地图回显  
2. $(document).ready(function(){  
3.     map("mapdiv");  
4. })  
5. //地图  
6. function map(div){  
7.     var map=new LTMaps(div);//地图对象  
8.     var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注  
9.     map.handleMouseScroll();//鼠标滚轮缩放  
10.     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图  
11.     map.addOverLay(marker)  //添加标注到地图上  
12. }  

修改地图上的标注： 

Js代码 

1. //地图回显  
2. $(document).ready(function(){  
3.     map("mapdiv");  
4. })  
5. //地图  
6. function map(div){  
7.     var map=new LTMaps(div);//地图对象  
8.     var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注  
9.     map.handleMouseScroll();//鼠标滚轮缩放  
10.     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图  
11.     map.addOverLay(marker)  //添加标注到地图上  
12.     var controlZoom = new LTStandMapControl();  
13.     map.addControl( controlZoom );  
14.     //添加标注控件并把事件绑定到按钮  
15.     var controlB = new LTMarkControl();//标记控件  
16.     controlB.setVisible(false);  
17.     document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};  
18.     map.addControl( controlB );  
19.     LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );  
20. }  
21. //添加标注时执行此函数  
22. function getPoi(controlB){  
23.     var poi = controlB.getMarkControlPoint();  
24.     $("#x").val(poi.getLongitude());  
25.     $("#y").val(poi.getLatitude());  
26. }  

其他参数设置： 
可以自定义标注图标样式 

Js代码 

1. var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//创建图标对象  
2. var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//创建标注  
3. //当鼠标移动到标注上可以显示标注内容  
4. LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('标注内容')});