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

Question

我想在谷歌地图上显示标记，并在其下方显示标题，如图所示：

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

Answer 1

至少从 2016 年 10 月开始，官方 API 提供了一种添加长度超过一个字母的永久可见标签的方法。见this reply by a Google project member。

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 属性实现。如果我们想使用默认图标，一个是available at 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-shadow CSS 属性为白色文本绘制黑色衬里。但是，我找不到将属性应用于标签的方法，因为谷歌地图创建的 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

我在另一篇文章中找到了对我来说非常有效的解决方案。

Add numbering label to google map marker

Answer 3

你不能！但是地图 API 的另一部分可用于永久显示附加到标记的文本（无需任何第三方组件），它称为 infoWindow。查看此示例代码并查看实际操作：https://developers.google.com/maps/documentation/javascript/examples/event-closure

如果您敢于使用第三方代码，那么这里有一些更接近您想要的外观和感觉的东西：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

Answer 4

我使用以下：

MarkerWithLabel.js

（图片只是一个flag.png文件）

在我的 X.html 文档中使用 javascript

它看起来像这样......

    <style type="text/css">
        .labels {
            color: black;
            background-color: white;
            font-family: "Lucida Grande", "Arial", sans-serif;
            font-size: 0.8em;
            font-weight: bold;
            text-align: center;
            width: 6em;
            border: 1px solid black;
            white-space: normal;
        }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=true"></script>
    <!--MarkerwithLabelClass - adjust the path!! -->
    <script src="YourPathHere/markerwithlabel.js"></script>

<script type="text/javascript">
//insert standaard initializing of googlemaps here
//and other windows.onload function
window.onload = function Initialize() {
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }
         function CreateMarker(lat, long, titel, label, image, anchorY, anchorX){

                   var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));//I use parseFloat cause my parameters are strings(coming from JSON-string)
                    var marker = new MarkerWithLabel({
                        zIndex: 1,
                        title: titel,
                        position: latlng,
                        draggable: false,
                        icon: image,
                        labelContent: label,
                        labelAnchor: new google.maps.Point(30, -2),
                        labelClass: "labels", // the CSS class for the label
                        labelStyle: { opacity: 0.80 }
                    });

                    return marker;
    }
 </script>

在此处阅读 google maps API 的许可信息：https://www.google.com/intx/en_uk/work/mapsearth/products/mapsapi.html

Answer 5

您应该能够使用与example 中相同的原理。您应该为每个标记创建一个新的自定义控件，然后将其放置在标记下方，而不是监听鼠标事件。希望它成功。