實作51Map地圖介面(範例程式碼)_javascript技巧

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

在網頁中引入

複製程式碼 程式碼如下:

 

地圖上標示：

複製程式碼 程式碼如下:

  //地圖示註
 $(document).ready(function(function(function(function) >  var ico=new LTIcon("",[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();//set (false);
  document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
  map.addControl( controlB );
",function(){getPoi(controlB)} );
 })

複製代碼程式碼如下: //添加標註時執行此函數

 function getPoi(controlB){

  var poi = controlB.getMarkControlPoint();
  var poi = controlB.getMarkControlPoint();
  var poi = controlB.getMarkControlPoint();
 ).val(poi.getLongitude()); //x,y為input標籤id透過它傳入後台儲存位置
  $("#y").val(poi.getLatitude());
}

複製程式碼 程式碼如下:

程式碼如下:

        

         style="color: #D01E14; font-weight: bolder; font-size: 12px">請看不到地圖這裡
        

       

在讀圖上回顯：在讀取圖中回顯複製程式碼 程式碼如下:

 //地圖回顯
 $(document).ready(function(){
  $("map" );
 })
 //地圖
 function map(div){
  var map=new LTMaps(div);//地圖物件
 LT var marker=new LTMaps(div);//地圖物件   map.handleMouseScroll();//滑鼠滾輪縮放
     map.centerAndZoom (new LTPoint($("#x").val(),$("#y").val()),5); //以座標為中心顯示地圖
  map.addOverLay(marker) / /添加標註到地圖上
 }

修改地圖上的標註：

複製代碼 程式碼如下:

 //地圖回顯
 $(document).ready(function(){
  map("mapdiv");
 })
 ///地圖
地圖  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();//標記控制
 var controlB = new LTMarkControl();//標記控制
 
  document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
 15.addControl( controlB ); }
 //新增標註時執行此函數
 function getPoi(controlB){
getMarkControlPoint();
  $("#x").val(poi.getLongitude());
  $("#y").val(poi.getLatitude());
 }

其他參數設定：
可以自訂標註圖示樣式

複製程式碼 程式碼如下：

var ico=new LTIcon("",[24,24],[12,12]);//建立圖標物件
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//建立標註
//當滑鼠移到標註上可以顯示標註內容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('標註內容')});