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: "5K",
   labelClass: "labels", // the CSS class for the label
   labelStyle: {top: "0px", left: "-21px", opacity: 0.75},
   labelVisible: true
 });

更具体地说：

labelText: "5K",

为什么它没有显示在地图上、DOM 或 CSS 中？

我看到文本在标记下方的两种可能方式，可能是 DOM 被操纵，文本被插入到图像中突出显示的 div 中，或者它可能是他们使用 CSS before 选择器来插入它。但是在这个例子中没有发生任何事情，我也没有在任何地方看到文本。

我已经按照其他问题中的建议尝试了 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: "5K",
       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: "5K",
       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>

MarkerWithLabel.js - labelText 没有为标记标签创建文本？

MarkerWithLabel.js - labelText not creating text for the marker label?

javascript

google-maps-api-3

google-maps-markers