51MAP provides a map interface for free The following are call interfaces and implement geographic tagging, storage, modification, and echo features.
51 Map URL: http://api.51ditu.com/
Introducing in a Web page
Copy Code code as follows:
<script type= "Text/javascript" src= "Http://api.51ditu.com/js/maps.js" ></script>
To mark on a map:
Copy Code code as follows:
Map marking
$ (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; Marking controls
Map.centerandzoom ("Tianjin", 5);//Tianjin
Map.handlemousescroll ()//mouse wheel
var controlzoom = new Ltstandmapcontrol ()//Zoom control
Map.addcontrol (Controlzoom);
Controlb = new Ltmarkcontrol ();//Add callout control and bind event to button
Controlb.setvisible (FALSE);
document.getElementById ("Addposition"). Onclick=function () {Controlb.btnclick ()};
Map.addcontrol (CONTROLB);
Ltevent.addlistener (Controlb, "MouseUp", function () {Getpoi (Controlb)});
})
Copy Code code as follows:
Perform this function when adding annotations
function Getpoi (controlb) {
var poi = Controlb.getmarkcontrolpoint ();
$ ("#x"). Val (Poi.getlongitude ()); X,y the input tag ID through it to the background storage location
$ ("#y"). Val (Poi.getlatitude ());
}
Copy Code code as follows:
<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; " > don't see the map please click here </a>
</div>
</div>
To echo the callout in the read graph:
Copy Code code as follows:
Map echo
$ (document). Ready (function () {
Map ("Mapdiv");
})
Map
function Map (DIV) {
var map=new ltmaps (DIV);//Map Object
var marker=new ltmarker (New Ltpoint ($ ("#x"). Val (), $ ("#y"). Val ());//Create Callout
Map.handlemousescroll ()//mouse wheel Zoom
Map.centerandzoom (The New Ltpoint ($ ("#x"). Val (), $ ("#y"). Val (), 5); Display a map in the center of coordinates
Map.addoverlay (marker)//Add annotation to map
}
Modify the annotation on the map:
Copy Code code as follows:
Map echo
$ (document). Ready (function () {
Map ("Mapdiv");
})
Map
function Map (DIV) {
var map=new ltmaps (DIV);//Map Object
var marker=new ltmarker (New Ltpoint ($ ("#x"). Val (), $ ("#y"). Val ());//Create Callout
Map.handlemousescroll ()//mouse wheel Zoom
Map.centerandzoom (The New Ltpoint ($ ("#x"). Val (), $ ("#y"). Val (), 5); Display a map in the center of coordinates
Map.addoverlay (marker)//Add annotation to map
var controlzoom = new Ltstandmapcontrol ();
Map.addcontrol (Controlzoom);
To add a callout control and bind the event to a button
var controlb = new Ltmarkcontrol ()//Tag control
Controlb.setvisible (FALSE);
document.getElementById ("Addposition"). Onclick=function () {map.removeoverlay (marker,true); ControlB.btnClick ()};
Map.addcontrol (CONTROLB);
Ltevent.addlistener (Controlb, "MouseUp", function () {Getpoi (Controlb)});
}
Perform this function when adding annotations
function Getpoi (controlb) {
var poi = Controlb.getmarkcontrolpoint ();
$ ("#x"). Val (Poi.getlongitude ());
$ ("#y"). Val (Poi.getlatitude ());
}
Other parameter settings:
Can customize callout icon style
Copy Code code as follows:
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 Callout
The callout can be displayed when the mouse is moved to the callout
Ltevent.addlistener (marker, "mouseover", function () {this.openinfowinhtml (' callout content ')});
