51map免费提供了地图接口以下是调用接口并且实现地理位置标注，存储,修改和回显功能。
51地图网址：http://api.51ditu.com/
在网页中引入
复制代码 代码如下:
在地图上标注：
复制代码 代码如下:
//地图标注
 $(document).ready(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();//添加标注控件并把事件绑定到按钮
  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());
 }
复制代码 代码如下:
style=color: #d01e14; font-weight: bolder; font-size: 12px;>看不到地图请点这里
在读图上回显标注：
复制代码 代码如下:
//地图回显
 $(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(,[24,24],[12,12]);//创建图标对象
var marker=new ltmarker(new ltpoint($(#x).val(),$(#y).val()),ico);//创建标注
//当鼠标移动到标注上可以显示标注内容
ltevent.addlistener( marker , mouseover , function(){this.openinfowinhtml('标注内容')});