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

Question

我对Google JavaScript Map API有疑问。

在maps.google.com（即星巴克）上搜索地点时，Google地图会在旁边添加一个带星巴克文字的标记：

是否可以使用自定义标记和文本执行相同的操作？我能够看到如何传递custom image for the marker，但我无法找到如何添加标签文本。我在API中找到的示例是使用“信息”窗口，但这对我来说可能有点笨重。

Answer 1

MarkerWithLabel 是扩展Google Maps JavaScript API V3 google.maps.Marker类的Google Maps Utility Library的一部分，允许您定义带有关联标签的标记。

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

创建基本标记

下面的示例显示了如何使用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