JavaScript调用Mapbar地图API实现定位与标注功能

Mapbar地图API接入与配置

本文所选用的地图服务为图吧地图。获取图吧地图在线API文档的地址为：http://union.mapbar.com/apidoc/。如需离线查阅，可从以下地址下载CHM格式文档：http://union.mapbar.com/apidoc/chm/mapbarapi.rar

地图显示效果如下图所示：

Mapbar 地图 API 允许开发者通过 JavaScript 将 Mapbar 地图嵌入到个人网页中。该 API 提供了多种与地图交互的方法（类似于 http://www.mapbar.com/localsearch/index.html 网页展示的功能），以及一系列向地图添加内容的服务，从而帮助开发者在自己的网站上构建稳定的地图应用程序。目前可用的公共测试密钥为：

 
http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT=

如果希望直接体验 Mapbar 地图功能，可以跳过申请密钥的步骤，直接使用上述公共测试密钥在本地环境（如 http://localhost）进行测试。

需要注意的是，Internet Explorer 8.0 版本存在兼容性问题。为确保地图折线功能正常执行，需在网页的 <head> 标签内添加 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 标签。

以下仅展示前端部分的源代码。

若需实现定位数据的持久化存储，需要在项目中通过 AJAX 技术进行后端交互。

相关代码实现如下：

 
<!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> 地图测试 </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;//地图对象
var marker=null;//标记对象
var le=null;//缩放级别
var myEventListener=null;//地图click事件句柄
function initMap()//初始化函数
{ //转帖请注明出处 http://Qbit.cnblogs.com
le=10; //默认缩放级别
maplet = new Maplet("mapbar");
//这里可以初始化地图坐标比如从数据库中读取 然后在页面上使用小脚本的形式
//如: maplet.centerAndZoom(new MPoint(<%=维度%>, <%=经度%>),<%=缩放级别%>);
maplet.centerAndZoom(new MPoint(116.38672, 39.90805), le);//初始化地图中心点坐标并设定缩放级别
maplet.addControl(new MStandardControl());
} 
function setp()
{ 
if (marker)//判定是否已经添加标记
{ 
alert("已经添加过标记了");
return;
} 
maplet.setMode("bookmark");//设定为添加标记模式
maplet.setCursorIcon("tb1.gif"); //添加鼠标跟随标签
myEventListener = MEvent.bind(maplet, "click", this, addp); //注册click事件句柄
} 
//这里的参数要写全即使你不使用event
function addp(event,point){
if(!marker){
marker = new MMarker( point, //坐标
new MIcon("mark.gif", 24, 24),//标签ICO(图片,大小)
new MInfoWindow("蔡瑞福庄河市", "史上最佳"),//标注对象
new MLabel("蔡瑞福")//小标签
); 
marker.bEditable=true;
marker.dragAnimation=true;
maplet.addOverlay(marker);//添加标注
marker.setEditable(true); //设定标注编辑状态
maplet.setMode("pan"); //设定地图为拖动(正常)状态
le= maplet.getZoomLevel(); //获取当前缩放级别
document.getElementById("findp").style.display="block";
document.getElementById("delp").style.display="block";
document.getElementById("savep").style.display="block";
MEvent.removeListener(myEventListener);//注销事件
} 
} 
//查找标记
function find(){
maplet.centerAndZoom(marker.pt, le);//定位标记
} 
//移除所有标记
function del(){
//移除已经设定的坐标
maplet.clearOverlays(true);
location.reload(); //在重新添加的时候有点bug 我这里是直接刷新页面 来重置
/*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();*/
} 
//提取标记数据
function savep()
{ 
alert("当前坐标点\n经度:"+marker.pt.lon+"\n维度:"+marker.pt.lat+"\n缩放级别:"+le);
} 
</script>
</head>
<body onload="initMap()">
<table width="501">
<tr><td><input type="button" value="添加标注" onclick="setp()"/></td>
<td><input type="button" id="findp" value="查看标记" style="display:none;" onclick="find()"/></td>
<td><input type="button" id="delp" value="删除标记" style="display:none;" onclick="del()"/></td>
<td><input type="button" id="savep" value="保存" 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>

完整源码下载地址: http://xiazai.jb51.net/201004/yuanma/mapbar.rar