在 markerwithlabel 中，labelcontent 不显示

Question

这是我的 google 带有标签的地图标记的代码。我包含了以下 javascript 个文件：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="js/markerwithlabel.js"></script>

地图代码为：

function initialize() {
        var latLng = {lat: 12.923157, lng: 80.153337};
        var homelatLng = new google.maps.LatLng(12.923157, 80.153337);
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: latLng,
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new MarkerWithLabel({
            position: homelatLng,
            map: map,
            labelContent: "ihoser",
            labelAnchor: new google.maps.Point(22, 0),
            labelClass: "map_marker_label", // the CSS class for the label
            labelStyle: {opacity: 0.75}
        });
        var infowindow = new google.maps.InfoWindow({
            content: "content";
        });
        google.maps.event.addListener(marker, 'click', function(e) {
           infowindow.open(map,this);
        });
        infowindow.open(map,marker);
    }
google.maps.event.addDomListener(window, 'load', initialize);

包含的样式为：

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

地图显示有营销人员、信息窗口和标签。但是标签是空的。事实上，labelContent 本身并没有加载到 DOM 中，甚至在通过提供点使标签居中之后，它似乎从 (0, 0) 开始。

我附上地图的图片。

Answer 1

确保您使用的是 markerwithlabel.js 的 最新版本 。

第 1 行有错别字：

var infowindow = new google.maps.InfoWindow({
    content: "content";
});

替换为

var infowindow = new google.maps.InfoWindow({
    content: "content"
});

工作示例

function initialize() {
    var latLng = { lat: 12.923157, lng: 80.153337 };
    var homelatLng = new google.maps.LatLng(12.923157, 80.153337);
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: latLng,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new MarkerWithLabel({
        position: homelatLng,
        map: map,
        labelContent: "ihoser",
        labelAnchor: new google.maps.Point(22, 0),
        labelClass: "map_marker_label", // the CSS class for the label
        labelStyle: { opacity: 0.75 }
    });
    var infowindow = new google.maps.InfoWindow({
        content: "content"
    });
    google.maps.event.addListener(marker, 'click', function (e) {
        infowindow.open(map, this);
    });
    infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

   html, body, #map {
            height: 480px;
            width: 640px;
            margin: 0px;
            padding: 0px;
        }


         .map_marker_label {
             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://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> 
<div id="map"></div>

Plunker

在 markerwithlabel 中，labelcontent 不显示

in markerwithlabel, labelcontent not displaying

google-maps

google-maps-api-3

google-maps-markers