您的位置：首页 > 其它

图吧地图：①得到地图上某个位置的经纬度；②显示多个坐标点；③动态显示多个坐标点；

2012-09-25 15:55 239 查看

本月完成了一个项目，这里面涉及到图吧地图，鄙人觉得挺好的，就拿出来分享一下：

①得到地图上某个位置的经纬度，代码贴出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="description" />
<meta content="" name="keywords" />
<title>地图</title>
<link rel="icon" href="http://img./favicon.ico" type="image/x-icon" />
<link href="css/index1.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.3&k=aCW9cItqL6QpaR0pLh8mcBEmcn4eb79hMYF5MXTrEeJsT7J6T7P9TRD7El==@7aMhs7F4s54ecLYLQpaB7T7h95MpsccQpMEMFp79W9pRs5qRp9cWphcraC0pFslFAV="></script>
</head>
<body onload="initMap()">

<div style="float: left; width: 1024px; height: 960px;" id="mapbar"></div>

</body>
</html>
<script type="text/javascript">
var maplet = null;
function initMap(){
maplet = new Maplet("mapbar");
maplet.centerAndZoom(new MPoint(111.02919,19.64479), 12);
maplet.addControl(new MStandardControl());
maplet.showOverview(false);

MEvent.addListener(maplet, "edit", dragEnd);

var marker = new MMarker(
new MPoint(111.02919,19.64479),
new MIcon("http://open.mapbar.com/apidoc/images/tb1.gif",32,32,16,32),
new MInfoWindow("","白金海岸度假酒店<br/>海南省文昌市清澜高隆湾白金路<br/>0898-6333999")
);

maplet.addOverlay(marker);

marker.setEditable(true);

}

function dragEnd(overlay) {
setTimeout(function() {
alert("新位置经纬度：" + overlay.pt.pid);
overlay.setEditable(true);
},500);
}
</script>


效果图：


②显示多个坐标点

<!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=gb2312"/>
<base href="http://union.mapbar.com">
<title>Mapbar 地图 JavaScript API 示例: 事件闭包</title>
<link href="/apidoc/style/style1.css" rel="stylesheet" type="text/css"/>
<link href="/apidoc/style/sh.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/apidoc/js/tools.js"></script>
<script type="text/javascript" src="/apidoc/js/sh.js"></script>
<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.3&k=aCW9cItqL6QpaR0pLh8mcBEmcn4eb79hMYF5MXTrEeJsT7J6T7P9TRD7El==@7aMhs7F4s54ecLYLQpaB7T7h95MpsccQpMEMFp79W9pRs5qRp9cWphcraC0pFslFAV="></script>
<script type="text/javascript">
var maplet = null;
function initMap(){

// 初始化地图
maplet = new Maplet("mapbar");
maplet.centerAndZoom(new MPoint(110.81175, 19.53714), 7);
maplet.addControl(new MStandardControl());
maplet.showOverview(false);

// 秘密数据
var message = ["白金海岸度假酒店","椰子大观园","东郊椰林","文昌孔庙","八门湾红树林","宋氏故居","铜鼓岭","石头公园","张云逸纪念馆","七洲列岛","月亮湾","七星岭位"];

// 五个标注的经纬度
var latlons = ["110.81175, 19.53714","110.79571,19.55129", "110.79338,19.56138",
"110.73344,19.60574", "110.81292,19.63778",
"110.90329,19.72414", "111.03018,19.64755",
"111.02919,19.64479",
"110.7907, 19.56886","111.2561, 19.95932",
"111.02651,19.67995","111.65088,20.11463"];

// 增加标注到地图
for(var i=0; i<latlons.length; i++) {

var newMarker = new MMarker(
new MPoint(latlons[i]),
new MIcon("http://union.mapbar.com/apidoc/images/detail_mark.gif",24,24),
new MInfoWindow("<b>#" + (i+1) + "</b>","")
);

maplet.addOverlay(newMarker);

newMarker.closureData = i;

MEvent.addListener(newMarker, "click", function(marker) {

// 闭包机制，在每个标注的click事件处理程序中可以访问到该
// 处理函数外部的变量message。
marker.info = new MInfoWindow(
"<b>" + (message[marker.closureData]) + "</b>",
message[marker.closureData]
);

marker.openInfoWindow();
})
}
}
</script>
</head>

<body onload="initMap()">
<div id="mapbar" style="width:600px;height:400px"></div>
</body>
</html>


效果图：



③动态显示多个坐标点

同上！！！dai整理
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航