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

来源：互联网发布：网通网络测速编辑：程序博客网时间：2024/05/22 09:42

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

①得到地图上某个位置的经纬度，代码贴出

<!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整理