Question

我正在使用Google API v3并使用MarkerwithLabel。包括Google API v3 lib和MarkerwithLabel lib之后我遇到的问题。我的标签永远不会显示在地图上。

这是我正在做的事情：

<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: "$425K",
       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 .try将样式添加到标签：

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: "$425K",
  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：不是字符串；并且没有文本属性”

标记标签未显示 - Google地图

2 个答案: