google map api v3 的marker使用label的方法(markerwithlabel的使用)

最新推荐文章于 2024-09-14 13:45:29 发布

李晓LOVE向阳

最新推荐文章于 2024-09-14 13:45:29 发布

阅读量2.3k

点赞数

分类专栏：地图汇总

本文链接：https://blog.csdn.net/u013310119/article/details/79730555

版权

地图汇总专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在google v3里面取消了marker的label方法，所以要自己定义叠加层来使用带文字标签的标注，但是自定义的话非常繁琐，故引用现成的markerwithlabel.js即可以实现对标注添加label。在使用过程中发生这么一个问题：marker标注的图标虽然显示出来了，但是都是集中在一个点（貌似是最后一个marker的位置）。问题的原因是markerwithlabel.js的1.8版本有bug，要使用V1.9以上，markerwithlabel.js下载地址：https://download.csdn.net/download/u013310119/10313997

下面是一个简单的例子，先看效果图

下面是代码，（注意添加markerwithlabel.js以及google api 的key： <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOURKEY&sensor=false"></script> <script type="text/javascript" src="markerwithlabel.js"></script>）

<span style="font-size:10px;"><!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
2.<html xmlns="http://www.w3.org/1999/xhtml">  
3.<head>  
4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
5. <title>MarkerWithLabel Example</title>  
6. <style type="text/css">  
7.   .labels {  
8.     color: red;  
9.     background-color: white;  
10.     font-family: "Lucida Grande", "Arial", sans-serif;  
11.     font-size: 10px;  
12.     font-weight: bold;  
13.     text-align: center;  
14.     width: 40px;       
15.     border: 2px solid black;  
16.     white-space: nowrap;  
17.   }  
18. </style>  
19. <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOURKEY&sensor=false"></script>  
20. <script type="text/javascript" src="markerwithlabel.js"></script>  
21. <script type="text/javascript">  
22.   function initMap() {  
23.     var latLng = new google.maps.LatLng(49.47805, -123.84716);  
24.     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);  
25.  
26.     var map = new google.maps.Map(document.getElementById('map_canvas'), {  
27.       zoom: 12,  
28.       center: latLng,  
29.       mapTypeId: google.maps.MapTypeId.ROADMAP  
30.     });  
31.  
32.     var marker = new MarkerWithLabel({  
33.       position: homeLatLng,  
34.       draggable: true,  
35.       map: map,  
36.       labelContent: "$425K",  
37.       labelAnchor: new google.maps.Point(22, 0),  
38.       labelClass: "labels", // the CSS class for the label  
39.       labelStyle: {opacity: 0.75}  
40.     });  
41.  
42.     var marker2 = new MarkerWithLabel({  
43.       position: new google.maps.LatLng(49.475, -123.84),  
44.       draggable: true,  
45.       map: map,  
46.       labelContent: "$395K",  
47.       labelAnchor: new google.maps.Point(22, 0),  
48.       labelClass: "labels", // the CSS class for the label  
49.       labelStyle: {opacity: 0.75}  
50.     });  
51.     var iw = new google.maps.InfoWindow({  
52.       content: "Home For Sale"  
53.     });  
54.     var iw2 = new google.maps.InfoWindow({  
55.       content: "Another Home For Sale"  
56.     });  
57.     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });  
58.     google.maps.event.addListener(marker2, "click", function (e) { iw2.open(map, marker2); });  
59.   };  
60. </script>  
61.</head>  
62.<body οnlοad="initMap()">  
63.<p>A basic example of markers with labels. Note that an information window appears whether you  
64.click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here  
65.are both draggable so you can easily verify that markers and labels overlap as expected.</p>  
66. <div id="map_canvas" style="height: 60%; width: 100%"></div>  
67. <div id="log"></div>  
68.</body>  
69.</html></span>