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

最新推荐文章于 2024-06-21 09:29:04 发布

xb12369

最新推荐文章于 2024-06-21 09:29:04 发布

阅读量7.5k

点赞数 4

文章标签： stylesheet function xhtml javascript html div

本文链接：https://blog.csdn.net/xb12369/article/details/8017257

版权

Asp.net 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

图吧地图

1 篇文章 0 订阅

订阅专栏

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

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

<!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 οnlοad="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 οnlοad="initMap()">
<div id="mapbar" style="width:600px;height:400px"></div>
</body>
</html>

效果图：