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

Posted 2023-02-23

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

【英文标题】：How can I show label/title for marker permanently in Google Maps V3?

【发布时间】：2011-08-01 23:54:45

【问题描述】：

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

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

【参考方案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 显示可见标签，而不需要任何插件，这还是很不错的 :)

【讨论】：

我见过的最好的答案之一，结构化的，描述性的，相关的截图和好的解决方案。如果你能放弃 2 票，我会

【参考方案2】：

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

Add numbering label to google map marker

【参考方案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

【讨论】：

作为 Web 开发人员，我们不总是使用 3rd 方代码吗？没有人用 Assembly 编写 html 表单；）

这太完美了，你！当 api 已经提供了额外的垃圾时，我们不应该需要引入额外的垃圾。

【参考方案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

【讨论】：

如果您下载 markerwithlabel.js 并将其永久放在您自己的服务器上并链接到该路径，除非您这样做，否则它不会改变。谷歌 api 是反向兼容的。所以我不希望出现问题。

【参考方案5】：

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

【讨论】：

例子是死链接