Question

我发现了exactly the same question用于Java，但我想在JS中做到这一点。那么，如何在JS Google地图上的标记上方添加文字？

Answer 1

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

如果在实例化push_back()类时使用label属性，则将其传递给一个对象，其中一个属性为new google.maps.Marker。

text

检查小提琴here。

Answer 2

我认为您所寻找的内容未包含在标准库中。谷歌确实提供了这个有趣的utility library，所以你可以制作自己的标记，标签。你想要的是MarkerWithLable类。从链接：

这个类的行为类似google.maps.Marker，但它支持。{ 标签与标记的关联。如果标记是可拖动的，标签也是如此。此外，带有标签的标记也会响应所有鼠标事件的方式与常规标记相同。它也是像常规一样触发鼠标事件和“属性改变”事件标记会。

看起来它的使用方式与标准Marker类的使用方式大致相同，并且似乎有足够的例子可以使用它如此好运，我希望这有用：）

Answer 3

我附上了infowindow的快速实施。请务必用您的API替换我的API_KEY，因为我只允许访问堆栈代码段。

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

<!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 stackoverflow!'
        });
        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=AIzaSyD-u9xoswsG45HrMnM0RMRyXG_w4LDP-PM&callback=initMap">
    </script>
  </body>
</html>

要仅在单击标记时显示infowindow，请将其包含在侦听器中：

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

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

3 个答案: