标记标签未显示 - Google 地图

Question

我正在使用 Google API v3 并且也在使用 MarkerwithLabel。即使在包含 Google API v3 库和 MarkerwithLabel 库之后，我仍然遇到这个问题。我的标签从未显示在地图上。

这是我正在做的事情：

<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=.......v=3.exp&libraries=places"></script><!-- Very Important For Google Maps-->

<script src="js/markerwithlabel.js"></script>

现在，在我运行测试示例后，他们给出了：

var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     map = new google.maps.Map(document.getElementById('map-cont'), {
       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 iw1 = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });

现在运行这个之后，我再也看不到标签了。

建议？

Answer 1

您需要使用 CSS 为您的标签添加样式。尝试使用这个：

function initialize() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

map = new google.maps.Map(document.getElementById('map-cont'), {
  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", // try adding css as below
  labelStyle: {opacity: 0.75},
  optimized:false
});

var iw1 = new google.maps.InfoWindow({
  content: "Home For Sale"
});
google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });  
}
google.maps.event.addDomListener(window, 'load', initialize);

.labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;
     height:20px;
     border: 2px solid black;
     white-space: nowrap;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js" type="text/javascript"></script>
<div id="map-cont" style="width:500px;height:400px;"></div>

Answer 2

如果对其他人有帮助，我的情况是我显示的是整数作为标签。需要对其调用 toString()：

new maps.Marker({
    ...
    label: location.label == null ? null : location.label.toString(),
    ...
})

出于某种原因，我花了一点时间才在控制台中看到 google 关于它的错误消息："InvalidValueError: setLabel: not a string; and no text property"

标记标签未显示 - Google 地图

Marker Label not showing - Google Maps

javascript

google-maps

google-maps-api-3