如何在Google Maps V3中永久显示标记的标签/标题

Question

我想在谷歌地图上显示标记,标题显示在它们下面,如图所示

现在我可以在v2中使用ELabel阅读,但在v3中已弃用.有没有办法在Google Maps V3中的标记图标下显示一些文字？

Answer 1

自2016年10月以来,官方API提供了一种添加长于一个字母的永久可见标签的方法.请参阅Google项目成员的回复.

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: 'Hello world',
});

默认情况下,结果如下所示:

相当不可读.幸运的是,API还允许使用MarkerLabel对象而不是纯字符串:

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: {
    color: 'white',
    fontWeight: 'bold',
    text: 'Hello world',
  },
});

上面的代码段会产生以下结果:

但是,原始问题询问标签是否位于标记下方.MarkerLabel文档提到这可以通过自定义图标和labelOrigin属性实现.如果我们想使用默认图标,可以在GitHub上找到一个.让我们添加图标对象:

var m = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  label: {
    color: 'white',
    fontWeight: 'bold',
    text: 'Hello world',
  },
  icon: {
    labelOrigin: new google.maps.Point(11, 50),
    url: 'default_marker.png',
    size: new google.maps.Size(22, 40),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(11, 40),
  },
});

结果如下:

非常好!但是,这整个方法的缺点是原始问题中的框没有:每种地图类型的可读性.如果地图类型从卫星更改为默认值,则生成的标签难以阅读:

避免两种类型中低对比度的简单但不完美的方法是设置color: 'gray':

然而,城市地区附近的灰色失败.更好的选择是应用text-shadowCSS属性为白色文本绘制黑色衬里.但是,我找不到将属性应用于标签的方法,因为Google Maps创建的DOM元素很少定义一个类:

我遇到的最佳选择是检测地图类型的变化并更新每个标记的标签颜色:

map.addListener('maptypeid_changed', function () {
  var typeToColor, type, color, k, label;

  typeToColor = {
    'terrain': 'black',
    'roadmap': 'black',
    'hybrid': 'white',
    'satellite': 'white',
  };

  type = map.getMapTypeId();
  color = typeToColor[type];

  for (k in markers) {
    if (markers.hasOwnProperty(k)) {
      label = markers[k].getLabel();
      label.color = color;
      markers[k].setLabel(label);
    }
  }
});

然而,即使这在雪天或阴天卫星图像上也会失败.我认为在大多数情况下它仍然足够好.不过,很高兴有能力使用官方API显示可见标签,没有任何插件:)

Answer 2

我在另一篇文章中找到了解决方案,对我来说非常合适.

将编号标签添加到谷歌地图标记