如何直接在Google地图上放置文字标签

Question

我对Google JavaScript Map API有疑问.

在maps.google.com(即星巴克)上搜索地点时,Google地图会在旁边添加一个带有星巴克文字的标记:

是否可以使用自定义标记和文本执行相同的操作？我能够看到如何为标记传递自定义图像,但我无法找到如何添加标签文本.我在API中找到的示例是使用"信息"窗口,但这对我来说可能会变得笨重.

Answer 1

MarkerWithLabel是 Google Maps Utility Library的一部分,它扩展了Google Maps JavaScript API V3google.maps.Marker类,允许您定义带有相关标签的标记.

正如您所料,如果标记是可拖动的,标签也是如此.此外,带有标签的标记以与常规标记相同的方式响应所有鼠标事件.它还会像常规标记一样触发鼠标事件和"属性更改"事件.

创建基本标记

下面的示例显示了如何使用MarkerWithLabel创建一个标记,该标记在一个小框中具有位于其下方的标签.通过定义具有标签DIV所需属性的CSS类,可以最方便地设置标签样式.在此示例中,该类称为"标签",此名称在labelClass参数中传递给MarkerWithLabel.可以在labelStyle参数中传递其他样式信息.标签的文本在labelContent中传递.可以传递给MarkerWithLabel的其他参数与可以传递给google.maps.Marker的参数相同.

 <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>

     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 marker1 = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: 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 iw1 = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });

http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/docs/reference.html