mapbar标注的一个例子

最新推荐文章于 2021-04-26 20:22:27 发布

「已注销」

最新推荐文章于 2021-04-26 20:22:27 发布

阅读量166

点赞数

分类专栏： Javascript 文章标签： JavaScript 地图 ViewUI

Javascript 专栏收录该内容

1 篇文章

订阅专栏

本文提供了一个使用Mapbar地图JavaScript API实现地图标注的示例代码。该示例展示了如何创建地图、添加控制项、设置地图中心及缩放级别，并通过拖拽标记更新坐标值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mapbar 地图 JavaScript API 示例: 地图标注</title>
<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31&k=aCW9cItqL7sqT7AxaB0zdHTzOIJrNyTrEeJyMYgnTREnZRV6El==@qTMWEInEnnqNOT0xBxyBMM6EMBIBTVgynBEryxtETTB0BTrTVTT=qIEI=EaTTI@9eyBMzyTFJ9="></script>
<script type="text/javascript">
var maplet = null;
var marker = null;
function initMap(){
maplet = new Maplet("mapbar");
maplet.centerAndZoom(new MPoint(116.38672,39.90805), 10);
maplet.addControl(new MStandardControl());
maplet.setMode("bookmark",function(dataObj){
if(marker!=null)
{
maplet.removeOverlay(marker);
}
document.getElementById("x").value=dataObj.point.lon;
document.getElementById("y").value=dataObj.point.lat;
marker = new MMarker(
dataObj.point,
new MIcon("../images/haha.gif",32,32)
);
maplet.addOverlay(marker);
marker.setEditable(true);
MEvent.addListener(marker,"drag",function(){
document.getElementById("x").value=this.pt.lon;
document.getElementById("y").value=this.pt.lat;
});
});
}
</script>
</head>

<body onload="initMap()">
<div id="mapbar" style="width:600px;height:500px"></div>
经度<input id="x" type="text" />
纬度<input id="y" type="text" />
</body>
</html>