Question

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

以下是Google针对标记

的代码

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属性重新定位它。

文字 |输入：string   要在标签中显示的文本。 仅显示此字符串的第一个字符。

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

example fiddle

代码段

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>

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

1 个答案: