标记标签未显示 - 谷歌地图

Marker Label not showing - Google Maps

本文关键字：谷歌地图 显示 标签      更新时间：2023-09-26

我正在使用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: "$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); });

现在运行这个后，我再也没有看到标签。

建议？

您需要使用

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>

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

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

出于某种原因，我花了一点时间才在控制台中看到谷歌关于它的错误消息："无效值错误：setLabel：不是字符串;并且没有文本属性"

相关文章：