51Map免費提供了地圖接口以下是調用接口并且實現地理位置標注，存儲,修改和回顯功能。
51地圖網址：

在網頁中引入

復制代碼 代碼如下:

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