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内，或者可能是他们使用CSS before选择器以插入它。但是在这个例子中既没有发生，也没有在任何地方看到文本。

我已尝试过其他问题中建议的以前版本的API，但无济于事，但我认为它不起作用。

有谁知道这里发生了什么？似乎对这个第三方扩展的支持在不久前就已经消失了，而且根本就没有这方面的信息。我还有其他方法可以完成这项任务吗？

Answer 1

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

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

代码段

＆＃13;

 tcp_listener list();

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: