Map location using JavaScript + mapbar

This map uses a map.
Figure bar map online API address
Http://union.mapbar.com/apidoc/
Offline chm format:
Http://union.mapbar.com/apidoc/chm/mapbarapi.rar

:

The mapbar map API allows you to use JavaScript to embed a mapbar map into your own webpage. The API provides many ways to interact with maps (as shown on the http://www.mapbar.com/localsearch/index.html web page), as well as a series of services that add content to maps, allowing you to create stable map applications on your own websiteProgram.
Public test key:

CopyCode The Code is as follows: http://union.mapbar.com/apis/maps/free? F = mapi & V = 31.2 & K = acw9citql7sqt7axab0zdhzozswmbbsu7jhmhtsmed6zil9nzfszht = @ jbl979 @ login =

If you want to try the mapbar map and omit the steps to apply for a key, you can use the public test key to perform the test locally (http: // localhost.
Compatibility issues exist in Internet Explorer 8.0, you need to add the <meta http-equiv = "X-UA-compatible" content = "Ie = emulateie7"/> tag between the Only some source code is available at the front end.
You need Ajax in your project to achieve location persistence
The Code is as follows: Copy code The Code is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> map test </title>
<SCRIPT type = "text/JavaScript" src = "http://union.mapbar.com/apis/maps/free? F = mapi & V = 31.2 & K = acw9citql7... "> </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR maplet = NULL; // map object
VaR marker = NULL; // mark the object
VaR Le = NULL; // scaling level
VaR myeventlistener = NULL; // map Click Event handle
Function initmap () // initialize the Function
{// Post please indicate the source http://Qbit.cnblogs.com
Le = 10; // default zoom level
Maplet = new maplet ("mapbar ");
// The map coordinates can be initialized here, for example, reading from the database and then using a small script on the page
// For example, maplet. centerandzoom (New mpoint (<% = dimension %>, <% = longitude %>), <% = zoom level %> );
Maplet. centerandzoom (New mpoint (116.38672, 39.90805), Le); // initialize the coordinates of the map center and set the zoom level
Maplet. addcontrol (New mstandardcontrol ());
}
Function setp ()
{
If (Marker) // determines whether a tag has been added
{
Alert ("marked ");
Return;
}
Maplet. setmode ("bookmark"); // set it to the Add Tag mode.
Maplet. setcursoricon ("tb1.gif"); // Add the mouse following tag
Myeventlistener = mevent. BIND (maplet, "click", this, ADDP); // register the Click Event handle
}
// The parameters here must be fully written, even if you do not use the event
Function ADDP (event, point ){
If (! Marker ){
Marker = new mmarker (point, // Coordinate
New micon ("mark.gif", 24, 24), // tag ICO (image, size)
New minfowindow ("Cai Ruifu Zhuanghe City", "Best in history"), // annotation object
New mlabel ("Cai Ruifu") // small tag
);
Marker. beditable = true;
Marker. draganimation = true;
Maplet. addoverlay (Marker); // Add Annotation
Marker. seteditable (true); // sets the annotation editing status
Maplet. setmode ("pan"); // set the map to the drag (normal) state.
Le = maplet. getzoomlevel (); // gets the current zoom level
Document. getelementbyid ("findp"). style. Display = "Block ";
Document. getelementbyid ("delp"). style. Display = "Block ";
Document. getelementbyid ("savep"). style. Display = "Block ";
Mevent. removelistener (myeventlistener); // deregister the event
}
}
// Search for tags
Function find (){
Maplet. centerandzoom (marker.pt, le); // locate the tag
}
// Remove all tags
Function del (){
// Remove the specified coordinates
Maplet. clearoverlays (true );
Location. Reload (); // there is a bug when adding a new one. Here, I directly refresh the page to reset it.
/* Document. getelementbyid ("findp"). style. Display = "NONE ";
Document. getelementbyid ("delp"). style. Display = "NONE ";
Document. getelementbyid ("savep"). style. Display = "NONE ";
Maplet = NULL;
Marker = NULL;
Myeventlistener = NULL;
Initmap ();*/
}
// Extract tag data
Function savep ()
{
Alert ("Current coordinate point \ N longitude:" + marker.pt. Lon + "\ n-dimensional degree:" + marker.pt. LAT + "\ n zoom level:" + le );
}
</SCRIPT>
</Head>
<Body onload = "initmap ()">
<Table width = "501" type = "parmname" text = "parmname">
<Tr> <TD> <input type = "button" value = "add annotation" onclick = "setp ()"/> </TD>
<TD> <input type = "button" id = "findp" value = "view tag" style = "display: none;" onclick = "find () "/> </TD>
<TD> <input type = "button" id = "delp" value = "delete tag" style = "display: none;" onclick = "del () "/> </TD>
<TD> <input type = "button" id = "savep" value = "save" style = "display: none;" onclick = "savep () "/> </TD>
</Tr>
<Tr> <TD colspan = "4"> <Div id = "mapbar" style = "width: 500px; Height: 300px"> </div>
</TD> </tr>
</Table>
</Body>
</Html>

Source code: http://xiazai.jb51.net/201004/yuanma/mapbar.rar