google-maps - 谷歌地图具有多个字符的标记标签

Question

我正在尝试将 4 个字符的标签(例如“A123”)添加到 Google map 标记，该标记具有使用自定义路径定义的宽图标。

var marker = new google.maps.Marker({
  position: latLon,
  label: { text: 'A123' },
  map: map,
  icon: {
    path: 'custom icon path',
    fillColor: '#000000',
    labelOrigin: new google.maps.Point(26.5, 20),
    anchor: new google.maps.Point(26.5, 43)
    scale: 1,
  }
});

marker label API仅限于单个字符，因此在上例中仅显示带有“A”的标记。我尝试使用 Chrome 开发人员工具来破解由 gmaps 创建的 html 并恢复较长的标签。它可以完美显示，无需修改所需的 CSS，因此我只需要找到一种方法来恢复 Google map 已删除的其他标签字符。

我筹集了Google Maps Issue请求取消此限制。请考虑为 Google 问题投票，访问上面的链接并为该问题加注星标，以鼓励 Google 修复它 - 谢谢!

但与此同时，是否有一种解决方法可以用来删除一个字符的限制？

有没有办法创建 google.maps.Marker 的自定义扩展来显示较长的标签？

Answer 1

您可以将 MarkerWithLabel 与 SVG 图标结合使用。

更新:Google Maps Javascript API v3 现在原生支持 MarkerLabel 中的多个字符。

proof of concept fiddle (你没有提供你的图标，所以我做了一个)

注意:重叠标记上的标签存在问题，this fix 已解决此问题，记入 robd谁在评论中提出的。

代码片段:

function initMap() {
  var latLng = new google.maps.LatLng(49.47805, -123.84716);
  var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new MarkerWithLabel({
    position: homeLatLng,
    map: map,
    draggable: true,
    raiseOnDrag: true,
    labelContent: "ABCD",
    labelAnchor: new google.maps.Point(15, 65),
    labelClass: "labels", // the CSS class for the label
    labelInBackground: false,
    icon: pinSymbol('red')
  });

  var iw = new google.maps.InfoWindow({
    content: "Home For Sale"
  });
  google.maps.event.addListener(marker, "click", function(e) {
    iw.open(map, this);
  });
}

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: 2
  };
}
google.maps.event.addDomListener(window, 'load', initMap);

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

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>