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

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

---

现在，我读到的这篇文章在v2中使用ELabel是可能的，但在v3中不推荐使用。在Google Maps V3中，有没有可能在标记图标下显示一些文本？

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

我在另一篇帖子中找到了这个解决方案，它对我来说非常有效

---

你不能！但是MapsAPI的另一部分可以用来将永久显示的文本附加到标记上（无需任何第三方组件），称为infoWindow。请查看此示例代码并查看其实际操作：

如果你敢使用第三方代码，那么这里有一些东西更接近你想要的外观和感觉：

我使用以下内容：

（图像只是一个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>

.标签{
颜色：黑色；
背景色：白色；
字体系列：“Lucida Grande”，“Arial”，无衬线；
字号：0.8em；
字体大小：粗体；
文本对齐：居中；
宽度：6em；
边框：1px纯黑；
空白：正常；
}
//在此处插入谷歌地图的标准
//和其他windows.onload功能
window.onload=函数初始化（）{
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
}
函数CreateMarker（lat、long、titel、label、image、anchorY、anchorX）{
var latlng=new google.maps.latlng（parseFloat（lat），parseFloat（long））；//我使用parseFloat是因为我的参数是字符串（来自JSON字符串）
变量标记=新标记WithLabel({
zIndex:1，
标题：滴度，
位置：latlng，
可拖动：错误，
图标：图像，
标签内容：标签，
labelAnchor：新的google.maps.Point（30，-2），
labelClass:“labels”，//标签的CSS类
标签样式：{不透明度：0.80}
});
返回标记；
}

---

请在此处阅读google maps API的许可证信息：

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

默认情况下，结果如下所示：

很难读懂。幸运的是，API还允许使用对象而不是普通字符串：

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

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

然而，最初的问题是，标签是否可以位于标记下方。MarkerLabel文档提到这可以通过自定义图标和

labelOrigin

属性实现。如果我们想使用默认图标，一个是。让我们添加图标对象：

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),
  },
});

这导致：

很好！然而，整个方法有一个缺点，即原始问题中的框没有：每种地图类型的可读性。如果地图类型从卫星更改为默认，则生成的标签很难读取：

避免这两种类型对比度低的一种简单但不完美的方法是设置

颜色：“灰色”

：

然而，灰色在城市地区附近不起作用。更好的选择是应用

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显示可见标签还是不错的：）

作为web开发人员，我们不是一直在使用第三方代码吗？没有人使用汇编编程html表单；）这太完美了，泰！如果你下载markerwithlabel.js并将其永久地放在你自己的服务器上并链接到该路径，它不会改变，除非你这样做。谷歌的api是gna，是反向兼容的。这个例子是一个死链接，是我见过的最好的答案之一，结构化、描述性、相关的屏幕截图和很好的解决方案。如果你能放弃2票，我会的

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);
    }
  }
});