51Map免費(fèi)提供了地圖接口以下是調(diào)用接口并且實(shí)現(xiàn)地理位置標(biāo)注，存儲,修改和回顯功能。
51地圖網(wǎng)址：http://api.51ditu.com/
在網(wǎng)頁中引入
<script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script>
在地圖上標(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)} );
})
//添加標(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());
}
<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;">看不到地圖請點(diǎn)這里</a>
</div>
</div>
在讀圖上回顯標(biāo)注：
//地圖回顯
$(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)注：
//地圖回顯
$(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)樣式
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)容')});
