實現51Map地圖介面(範例程式碼)

51Map免費提供了地圖介面以下是調用介面並且實現地理位置標註，儲存,修改和回顯功能。
51地圖網址：http://api.51ditu.com/

在網頁中引入
複製代碼 代碼如下:
<script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script> 

在地圖上標註：
複製代碼 代碼如下:
  //地表徵圖注
 $(document).ready(function(){
  var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);
  var map=new LTMaps("mapdiv");//地圖對象
  var controlB;  //標記控制項
  map.centerAndZoom("tianjin",5);//天津
  map.handleMouseScroll();//滑鼠滾輪
  var controlZoom = new LTStandMapControl();//縮放控制項
  map.addControl( controlZoom );
  controlB = new LTMarkControl();//添加標註控制項並把事件綁定到按鈕
  controlB.setVisible(false);
  document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
  map.addControl( controlB );
  LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
 })

複製代碼 代碼如下:
 //添加標註時執行此函數
 function getPoi(controlB){
  var poi = controlB.getMarkControlPoint();
  $("#x").val(poi.getLongitude()); //x,y為input標籤id通過它傳入後台儲存位置
  $("#y").val(poi.getLatitude());
 }

複製代碼 代碼如下:
<div id="mapdiv" style="width: 300px; height: 200px; position:static;">
        <div align="center" style="margin: 12px;">
        <a href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank"
         style="color: #D01E14; font-weight: bolder; font-size: 12px;">看不到地圖請點這裡</a>
        </div>
       </div>

在讀圖上回顯標註：
複製代碼 代碼如下:
 //地圖回顯
 $(document).ready(function(){
  map("mapdiv");
 })
 //地圖
 function map(div){
  var map=new LTMaps(div);//地圖對象
  var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//建立標註
   map.handleMouseScroll();//滑鼠滾輪縮放
     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以座標為中心顯示地圖
  map.addOverLay(marker) //添加標註到地圖上
 }

修改地圖上的標註：
複製代碼 代碼如下:
 //地圖回顯
 $(document).ready(function(){
  map("mapdiv");
 })
 //地圖
 function map(div){
  var map=new LTMaps(div);//地圖對象
  var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//建立標註
   map.handleMouseScroll();//滑鼠滾輪縮放
     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以座標為中心顯示地圖
  map.addOverLay(marker) //添加標註到地圖上
  var controlZoom = new LTStandMapControl();
  map.addControl( controlZoom );
  //添加標註控制項並把事件綁定到按鈕
  var controlB = new LTMarkControl();//標記控制項
  controlB.setVisible(false);
  document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
  map.addControl( controlB );
  LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
 }
 //添加標註時執行此函數
 function getPoi(controlB){
  var poi = controlB.getMarkControlPoint();
  $("#x").val(poi.getLongitude());
  $("#y").val(poi.getLatitude());
 }

其他參數設定：
可以自訂標註表徵圖樣式
複製代碼 代碼如下:
var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//建立表徵圖對象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//建立標註
//當滑鼠移動到標註上可以顯示標註內容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('標註內容')});