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

Question

我想用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内，也可能是他们所使用的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: "$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>