MarkerWithLabel.js-labelText不为标记标签创建文本吗？

Question

我想使用Google Maps Utility Library v3中的MarkerWithLabel，如下所示：

https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/examples/basic.html?r=131

但是问题是示例代码产生了我认为不正确的结果。 我说这是因为我不确定演示应如何工作，但肯定不是这样的：

我看到的是在标记的下面，我们有带有黑色边框的标签的容器，在示例中的内联CSS内有：

border: 2px solid black;

因此，这是我们肯定会在地图上的标记下方看到的内容。 但是问题是，当我们在将标记添加到initMap（）函数内的地图之前定义标记时，我们有：

var marker = new MarkerWithLabel({
   position: homeLatLng,
   draggable: false,
   map: map,
   labelText: "$425K",
   labelClass: "labels", // the CSS class for the label
   labelStyle: {top: "0px", left: "-21px", opacity: 0.75},
   labelVisible: true
 });

进一步来说：

labelText: "$425K",

为什么在地图，DOM或CSS中未显示此信息？

我看到标记位于文本下方的两种可能方式，可能是操纵了DOM并将文本插入了图像中突出显示的div内，或者可能是他们before选择器插入before使用了CSS。 但是在此示例中没有任何反应，并且在任何地方都看不到该文本。

我尝试了其他问题中建议的API的早期版本，但无济于事，它无法正常工作。

有人知道这里发生了什么吗？ 似乎对该第三方扩展的支持在一段时间之前就已经消失了，对此的信息还很少。 我还有其他方法可以完成此任务吗？

Answer 1

那是库（r131）的真正旧版本。 使用最新版本：

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/examples/basic.html

代码段：

 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 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 marker2 = new MarkerWithLabel({ position: new google.maps.LatLng(49.475, -123.84), draggable: true, raiseOnDrag: true, map: map, labelContent: "$395K", labelAnchor: new google.maps.Point(22, 0), labelClass: "labels", // the CSS class for the label labelStyle: {opacity: 1.0} }); var iw1 = new google.maps.InfoWindow({ content: "Home For Sale" }); var iw2 = new google.maps.InfoWindow({ content: "Another Home For Sale" }); google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); }); google.maps.event.addListener(marker2, "click", function (e) { iw2.open(map, this); }); } google.maps.event.addDomListener(window,'load',initMap); 

  .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; } 

 <script src="https://maps.googleapis.com/maps/api/js?v=3"></script> <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> <p>A basic example of markers with labels. Note that an information window appears whether you click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here are both draggable so you can easily verify that markers and labels overlap as expected.</p> <div id="map_canvas" style="height: 400px; width: 100%;"></div> <div id="log"></div>