Question

我想在Google地图上显示标记，标题显示在其下方，如图所示 Sample in ver 2

现在我可以在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属性为白色文本绘制黑色衬里。但是，我找不到将属性应用于标签的方法，因为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

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

Add numbering label to google map marker

Answer 3

你不能！但是你可以使用map API的另一部分来永久显示附加到标记的文本（不需要任何第三方组件），它叫做infoWindow。看一下示例代码＆amp;看到它的实际效果：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

example （图片只是一个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中相同的原则。您应该为每个标记创建一个新的自定义控件，然后将其放置在标记下方，而不是监听鼠标事件。希望它成功。

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

5 个答案: