标记上的标签不起作用

Question

我遵循了一些指南，但我的地图上没有显示标签。我用离子。这是我的代码（在地图控制器中）：

var myLatLng = new google.maps.LatLng(lat,lon);
    var stylesMap = [
        {
            featureType: "poi",
            elementType: "labels",
            stylers: [
                { visibility: "off" }
            ]
        }
    ];
    var myOptions = {
        zoom: 15,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        mapTypeControl:false,
        styles: stylesMap
    };
    var map = new google.maps.Map(document.getElementById("gmaps-canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        labelContent: "5K",
        labelAnchor: new google.maps.Point(22, 0),
        labelClass: "labels", // the CSS class for the label
        zIndex: 10000,
        icon: "img/marker/tuseiqui.png"
    });
    google.maps.event.addListener(marker, 'click', function() {
    });

这是 css:

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

标记在地图上显示正确，但未显示其标签..

Answer 1

该代码看起来像是 MarkerWithLabel-库的示例。

您必须包含 library 并创建 new MarkerWithLabel 而不是 new google.maps.Marker

var myLatLng = new google.maps.LatLng(0, 0);
var stylesMap = [{
  featureType: "poi",
  elementType: "labels",
  stylers: [{
    visibility: "off"
  }]
}];
var myOptions = {
  zoom: 15,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  streetViewControl: false,
  mapTypeControl: false,
  styles: stylesMap
};
var map = new google.maps.Map(document.getElementById("gmaps-canvas"), myOptions);
var marker = new MarkerWithLabel({
  position: myLatLng,
  map: map,
  labelContent: "5K",
  labelAnchor: new google.maps.Point(22, 0),
  labelClass: "labels", // the CSS class for the label
  zIndex: 10000
    //,icon: "img/marker/tuseiqui.png"
});
google.maps.event.addListener(marker, 'click', function() {});

html,
body,
#gmaps-canvas {
  height: 100%;
  padding: 0;
  margin: 0;
}
.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;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script>
<div id="gmaps-canvas"></div>

标记上的标签不起作用

Label on Marker doesn't work

javascript

maps

google-maps

google-maps-api-3

google-maps-markers