如何在 JS 中的 Google 地图上的标记上方添加文本？

Question

我为 Java 找到了 exactly the same question，但我想在 JS 中这样做。那么，如何在 JS 中的 Google 地图上的标记上方添加文本？

Answer 1

我认为您要查找的内容不包含在标准库中。 Google 确实提供了这个有趣的东西 utility library，因此您可以制作自己的标记和标签。您想要的是 MarkerWithLable class。来自 link:

This class behaves like google.maps.Marker, but it supports the association of a label with the marker. If the marker is draggable, so too will be the label. In addition, a marker with a label responds to all mouse events in the same manner as a regular marker. It also fires mouse events and "property changed" events just as a regular marker would.

看起来它的使用方式与标准 Marker class 的使用方式大致相同，并且似乎有大量示例可以证明它的使用效果，祝您好运，我希望这对您有所帮助 :)

Answer 2

我附上了 infowindow 的快速实现。请务必将我的 API_KEY 替换为您的，因为我只允许访问堆栈片段 url.

此代码片段创建了一个信息窗口。在示例中，信息窗口在创建后立即被调用以在标记上方显示其内容。

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var infowindow = new google.maps.InfoWindow({
          content: 'Welcome to Whosebug!'
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
        infowindow.open(map, marker);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap">
    </script>
  </body>
</html>

要仅在单击标记时显示信息窗口，请将其包装在侦听器中：

marker.addListener('click', function() {
    infowindow.open(map, marker);
});

Answer 3

如我的评论所述，地图标记标签可以使用多个字母。

如果在实例化 new google.maps.Marker class 时使用 label 属性，则向其传递一个对象，其中一个属性为 text。

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(0, 0),
    icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    label: { color: '#00aaff', fontWeight: 'bold', fontSize: '14px', text: 'Your text here' }
});

检查 fiddle here。

如何在 JS 中的 Google 地图上的标记上方添加文本？

How to add text above a marker on Google Maps in JS?

javascript

google-maps

google-maps-api-3

google-maps-markers