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 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('標注內容')});
