實現(xiàn)51Map地圖接口(示例代碼)

更新時間：2013年11月22日 08:50:13 作者：

這篇文章主要介紹了實現(xiàn)51Map地圖接口的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助

51Map免費提供了地圖接口以下是調(diào)用接口并且實現(xiàn)地理位置標(biāo)注，存儲,修改和回顯功能。
51地圖網(wǎng)址：http://api.51ditu.com/

在網(wǎng)頁中引入

在地圖上標(biāo)注：

  //地圖標(biāo)注
 $(document).ready(function(){
  var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);
  var map=new LTMaps("mapdiv");//地圖對象
  var controlB;  //標(biāo)記控件
  map.centerAndZoom("tianjin",5);//天津
  map.handleMouseScroll();//鼠標(biāo)滾輪
  var controlZoom = new LTStandMapControl();//縮放控件
  map.addControl( controlZoom );
  controlB = new LTMarkControl();//添加標(biāo)注控件并把事件綁定到按鈕
  controlB.setVisible(false);
  document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
  map.addControl( controlB );
  LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
 })

復(fù)制代碼代碼如下:

 //添加標(biāo)注時執(zhí)行此函數(shù)
 function getPoi(controlB){
  var poi = controlB.getMarkControlPoint();
  $("#x").val(poi.getLongitude()); //x,y為input標(biāo)簽id通過它傳入后臺儲存位置
  $("#y").val(poi.getLatitude());
 }

復(fù)制代碼代碼如下:

<div id="mapdiv" style="width: 300px; height: 200px; position:static;">
        <div align="center" style="margin: 12px;">
        <a  target="_blank"
         style="color: #D01E14; font-weight: bolder; font-size: 12px;">看不到地圖請點這里</a>
        </div>
       </div>

在讀圖上回顯標(biāo)注：

復(fù)制代碼代碼如下:

 //地圖回顯
 $(document).ready(function(){
  map("mapdiv");
 })
 //地圖
 function map(div){
  var map=new LTMaps(div);//地圖對象
  var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//創(chuàng)建標(biāo)注
   map.handleMouseScroll();//鼠標(biāo)滾輪縮放
     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐標(biāo)為中心顯示地圖
  map.addOverLay(marker) //添加標(biāo)注到地圖上
 }

修改地圖上的標(biāo)注：

復(fù)制代碼代碼如下:

 //地圖回顯
 $(document).ready(function(){
  map("mapdiv");
 })
 //地圖
 function map(div){
  var map=new LTMaps(div);//地圖對象
  var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//創(chuàng)建標(biāo)注
   map.handleMouseScroll();//鼠標(biāo)滾輪縮放
     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐標(biāo)為中心顯示地圖
  map.addOverLay(marker) //添加標(biāo)注到地圖上
  var controlZoom = new LTStandMapControl();
  map.addControl( controlZoom );
  //添加標(biāo)注控件并把事件綁定到按鈕
  var controlB = new LTMarkControl();//標(biāo)記控件
  controlB.setVisible(false);
  document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
  map.addControl( controlB );
  LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
 }
 //添加標(biāo)注時執(zhí)行此函數(shù)
 function getPoi(controlB){
  var poi = controlB.getMarkControlPoint();
  $("#x").val(poi.getLongitude());
  $("#y").val(poi.getLatitude());
 }

其他參數(shù)設(shè)置：
可以自定義標(biāo)注圖標(biāo)樣式

復(fù)制代碼代碼如下:

var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//創(chuàng)建圖標(biāo)對象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//創(chuàng)建標(biāo)注
//當(dāng)鼠標(biāo)移動到標(biāo)注上可以顯示標(biāo)注內(nèi)容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('標(biāo)注內(nèi)容')});