在谷歌地图标记中显示多个字符

Question

我已经实现了谷歌标记，我想在标记内显示一个名称。我试图更改标签：如下代码，但它只显示第一个字符..有人可以告诉我如何解决这个问题吗？

这是来自谷歌的标记代码

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: "lets showthis",
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Link to the google maps

Answer 1

google.maps.Marker label 是单个字符。

documentation 明确指出：

MarkerLabel 对象规范

google.maps.MarkerLabel 对象规范

这些选项指定标记标签的外观。 标记标签是将出现在标记内的单个文本字符。如果您将其与自定义标记一起使用，您可以使用 Icon 类中的 labelOrigin 属性重新定位它。

文字 |类型：字符串 要在标签中显示的文本。 只会显示该字符串的第一个字符。

如果你想要多个字符（至少现在有一个open feature request to make that number larger），你需要使用像MarkerWithLabel 这样的第三方库。

example fiddle

代码 sn-p：

function initialize() {
  var bangalore = {
    lat: 12.97,
    lng: 77.59
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new MarkerWithLabel({
    position: location,
    labelContent: "lets showthis",
    map: map,
    labelAnchor: new google.maps.Point(35, 120),
    labelClass: "labels", // the CSS class for the label
    labelInBackground: false,
    icon: pinSymbol('red')
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

// creates an SVG marker in the teardrop shape of the "normal" marker
function pinSymbol(color) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 4
  };
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.labels {
  color: black;
  background-color: red;
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 10px;
  text-align: center;
  width: 70px;
  white-space: nowrap;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map"></div>