51Map provides the map interface for free. The following is the calling interface and the implementation of geolocation annotation, storage, modification and echo functions. 51 map url: (link: http://api.51ditu.com/)

Introduced in web pages

<script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script> 

Mark on the map:

  //maps
 $(document).ready(function(){
  var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);
  var map=new LTMaps("mapdiv");//Map object
  var controlB;  //Tag controls
  map.centerAndZoom("tianjin",5);// tianjin
  map.handleMouseScroll();//The mouse wheel
  var controlZoom = new LTStandMapControl();//Zoom control
  map.addControl( controlZoom );
  controlB = new LTMarkControl();//Add an annotation control and bind the event to the button
  controlB.setVisible(false);
  document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
  map.addControl( controlB );
  LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
 })

 //This function is executed when an annotation is added
 function getPoi(controlB){
  var poi = controlB.getMarkControlPoint();
  $("#x").val(poi.getLongitude()); //X,y is the input tag id which is passed into the background store location
  $("#y").val(poi.getLatitude());
 }

<div id="mapdiv" style="width: 300px; height: 200px; position:static;">
        <div align="center" style="margin: 12px;">
        <a href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank"
         style="color: #D01E14; font-weight: bolder; font-size: 12px;"> If you can't see the map, click here </a>
        </div>
       </div>

Echo mark on the reading chart:

 //Map the echo
 $(document).ready(function(){
  map("mapdiv");
 })
 // The map
 function map(div){
  var map=new LTMaps(div);//Map object
  var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//Create a label
   map.handleMouseScroll();//Mouse wheel zooming
     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //Display the map centered on coordinates
  map.addOverLay(marker) //Add annotations to the map
 }

Modify the annotation on the map:

 //Map the echo
 $(document).ready(function(){
  map("mapdiv");
 })
 // The map
 function map(div){
  var map=new LTMaps(div);//Map object
  var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//Create a label
   map.handleMouseScroll();//Mouse wheel zooming
     map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //Display the map centered on coordinates
  map.addOverLay(marker) //Add annotations to the map
  var controlZoom = new LTStandMapControl();
  map.addControl( controlZoom );
  //Add an annotation control and bind the event to the button
  var controlB = new LTMarkControl();//Tag controls
  controlB.setVisible(false);
  document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
  map.addControl( controlB );
  LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
 }
 //This function is executed when an annotation is added
 function getPoi(controlB){
  var poi = controlB.getMarkControlPoint();
  $("#x").val(poi.getLongitude());
  $("#y").val(poi.getLatitude());
 }

Other parameter Settings: You can customize the annotation icon style

var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//Create icon object
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//Create a label
//When the mouse moves over the label, the label can be displayed
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml(' Tagging content ')});