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

来源：互联网发布：java 如何建立socket 编辑：程序博客网时间：2024/06/08 03:56

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

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

下面是代码，（注意添加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"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>MarkerWithLabel Example</title> <style type="text/css">   .labels {     color: red;     background-color: white;     font-family: "Lucida Grande", "Arial", sans-serif;     font-size: 10px;     font-weight: bold;     text-align: center;     width: 40px;          border: 2px solid black;     white-space: nowrap;   } </style> <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> <script type="text/javascript">   function initMap() {     var latLng = new google.maps.LatLng(49.47805, -123.84716);     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);     var map = new google.maps.Map(document.getElementById('map_canvas'), {       zoom: 12,       center: latLng,       mapTypeId: google.maps.MapTypeId.ROADMAP     });     var marker = new MarkerWithLabel({       position: homeLatLng,       draggable: true,       map: map,       labelContent: "$425K",       labelAnchor: new google.maps.Point(22, 0),       labelClass: "labels", // the CSS class for the label       labelStyle: {opacity: 0.75}     });     var marker2 = new MarkerWithLabel({       position: new google.maps.LatLng(49.475, -123.84),       draggable: true,       map: map,       labelContent: "$395K",       labelAnchor: new google.maps.Point(22, 0),       labelClass: "labels", // the CSS class for the label       labelStyle: {opacity: 0.75}     });     var iw = new google.maps.InfoWindow({       content: "Home For Sale"     });     var iw2 = new google.maps.InfoWindow({       content: "Another Home For Sale"     });     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });     google.maps.event.addListener(marker2, "click", function (e) { iw2.open(map, marker2); });   }; </script></head><body onload="initMap()"><p>A basic example of markers with labels. Note that an information window appears whether youclick the marker portion or the label portion of the MarkerWithLabel. The two markers shown hereare both draggable so you can easily verify that markers and labels overlap as expected.</p> <div id="map_canvas" style="height: 60%; width: 100%"></div> <div id="log"></div></body></html></span>

0 0