Implement the 51Map map interface (sample code)

51Map provides a map interface for free. The following APIs are called to mark, store, modify, and display geographical locations.
51 map Web site: http://api.51ditu.com/

Introduce
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "http://api.51ditu.com/js/maps.js"> </script>

Mark on the map:
Copy codeThe Code is as follows:
// Map Annotation
$ (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 (); // scroll wheel
Var controlZoom = new LTStandMapControl (); // scaling Control
Map. addControl (controlZoom );
ControlB = new LTMarkControl (); // Add the 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 )});
})

Copy codeThe Code is as follows:
// Execute this function when adding Annotation
Function getPoi (controlB ){
Var poi = controlB. getMarkControlPoint ();
$ ("# X"). val (poi. getlongpolling (); // x, where y is the input tag id.
$ ("# Y"). val (poi. getLatitude ());
}

Copy codeThe Code is 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;"> click here if you cannot see the map </a>
</Div>
</Div>

Echo Annotation on the reading graph:
Copy codeThe Code is 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 Annotation
Map. handleMouseScroll (); // scroll wheel Scaling
Map. centerAndZoom (new LTPoint ($ ("# x "). val (), $ ("# y "). val (), 5); // display the map with coordinates as the center
Map. addOverLay (marker) // Add the annotation to the map
}

Modify the Annotation on the map:
Copy codeThe Code is 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 Annotation
Map. handleMouseScroll (); // scroll wheel Scaling
Map. centerAndZoom (new LTPoint ($ ("# x "). val (), $ ("# y "). val (), 5); // display the map with coordinates as the center
Map. addOverLay (marker) // Add the annotation to the map
Var controlZoom = new LTStandMapControl ();
Map. addControl (controlZoom );
// Add the annotation control and bind the event to the button
Var controlB = new LTMarkControl (); // tag the 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 )});
}
// Execute this function when adding Annotation
Function getPoi (controlB ){
Var poi = controlB. getMarkControlPoint ();
$ ("# X"). val (poi. getlongpolling ());
$ ("# Y"). val (poi. getLatitude ());
}

Other parameter settings:
You can customize the icon style.
Copy codeThe Code is as follows:
Var ico = new LTIcon ("<c: url value = '/images/manPosition.gif'/>", [24, 24], [12, 12]); // create an icon object
Var marker = new LTMarker (new LTPoint ($ ("# x "). val (), $ ("# y "). val (), ico); // create Annotation
// When you move the cursor over the annotation, the content of the annotation can be displayed.
LTEvent. addListener (marker, "mouseover", function () {this. openInfoWinHtml ('annotation content ')});