Javascript+mapbar realization of Map location _javascript skills

The map used in this article is map
Map Online API Address
http://union.mapbar.com/apidoc/
Offline CHM format Download address:
Http://union.mapbar.com/apidoc/chm/mapbarapi.rar

Effect Chart:

The Mapbar map API allows you to embed Mapbar maps into your own web pages using JavaScript. The API provides a number of 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 to add content to the map, allowing you to create stable map applications on your site.
Public test key:

Copy Code code as follows:

http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k= acw9citql7sqt7axab0zdhzozswmbbsut7jhmhtsmed6zil9nzfszht=@ jbl979@iu7ljjzwwq0idu9xzmzmxq7i9ahh7laaa6hqzzhzzltbzzauxldz7c7dd9zcfgt=

If you want to try a Mapbar map, omit the procedure for requesting a key, you can test it locally (http://localhost) using a public test key.
There is a compatibility issue with Internet Explorer version 8.0 that requires adding <meta http-equiv= "x-ua-compatible" content= "ie=emulateie7" between pages Here only the front part of the source code
You need Ajax in your project to achieve positioning persistence
The code is as follows

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<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;//tag Object
var le=null;//zoom level
var myeventlistener=null;//map Click event handle
function Initmap ()//initialization functions
{//Reprint please indicate the source http://Qbit.cnblogs.com
le=10; Default zoom Level
Maplet = new Maplet ("Mapbar");
This allows you to initialize map coordinates, such as reading from a database and then using a small script on the page.
such as: Maplet.centerandzoom (New Mpoint (<%= dimension%> <%= longitude%>), <%= zoom level%>);
Maplet.centerandzoom (New Mpoint (116.38672, 39.90805), le);//Initialize Map center point coordinates and set zoom level
Maplet.addcontrol (New Mstandardcontrol ());
}
function Setp ()
{
if (marker)//Determines whether the tag has been added
{
Alert ("Tagged already added");
Return
}
Maplet.setmode ("bookmark");//set to add tag mode
Maplet.setcursoricon ("Tb1.gif"); Add mouse to follow tag
MyEventListener = Mevent.bind (Maplet, "Click", this, ADDP); Registering the Click event handle
}
Here's the argument to write all even if you don't use event
function ADDP (event,point) {
if (!marker) {
Marker = new Mmarker (point,//coordinates
New Micon ("Mark.gif", 24, 24),//label ico (picture, size)
New Minfowindow ("Cairefo Zhuanghe", "Best in History"),//Callout Object
New Mlabel ("Cairefo")//Small label
);
Marker.beditable=true;
Marker.draganimation=true;
Maplet.addoverlay (marker);//Add Callout
Marker.seteditable (TRUE); Set callout Edit Status
Maplet.setmode ("Pan"); Set map to drag (normal) state
Le= Maplet.getzoomlevel (); Get Current zoom level
document.getElementById ("FINDP"). style.display= "Block";
document.getElementById ("Delp"). style.display= "Block";
document.getElementById ("Savep"). style.display= "Block";
Mevent.removelistener (MyEventListener)/Logoff event
}
}
Find tags
function Find () {
Maplet.centerandzoom (marker.pt, le);/locator Tag
}
Remove All Tags
Function del () {
Remove the already set coordinates
Maplet.clearoverlays (TRUE);
Location.reload (); A bit of a bug when I add it again I am here to refresh the page directly to reset
/*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 ("The current coordinate point \ n Longitude: +marker.pt.lon+" \ n Dimension: "+marker.pt.lat+" \ n zoom level: "+le);
}
</script>
<body onload= "Initmap ()" >
<table width= "501" >
<tr><td><input type= "button" value= "Add Callout" onclick= "Setp ()"/></td>
<td><input type= "button" id= "FINDP" value= "View Mark" style= "Display:none;" onclick= "Find ()"/></td>
<td><input type= "button" id= "Delp" value= "delete Mark" style= "Display:none;" onclick= "Del ()"/></td>
<td><input type= "button" id= "Savep" value= "Save" style= "Display:none" onclick= "Savep ()"/></td>
</tr>
&LT;TR&GT;&LT;TD colspan= "4" ><div id= "Mapbar" style= "width:500px;height:300px" ></div>
</td></tr>
</table>
</body>

SOURCE Download Address: Http://xiazai.jb51.net/201004/yuanma/mapbar.rar