javascript+mapbar实现地图定位

时间：2021-05-26

本文地图使用的是图地图
图吧地图在线API地址
http://union.mapbar.com/apidoc/
离线CHM格式 下载地址:
http://union.mapbar.com/apidoc/chm/mapbarapi.rar

效果图:

Mapbar 地图 API 让您可以使用 JavaScript 将 Mapbar地图嵌入您自己的网页中。API 提供了许多方法与地图交互（正如http://
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 我这里是直接刷新页面 来重置

}
//提取标记数据
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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章