如何在带有 JavaScript 的 Google 地图中的标记上显示标签（信息窗口）？

Question

我正在尝试在 Google 地图标记中显示标签，如下图所示。我如何实现这一目标？ https://ibb.co/nRGn1pG

function initMap() {

        var myLatlng = new google.maps.LatLng(42.3730492, -71.0499857);
        var mapOptions = {
            zoom: 15,
            center: myLatlng,
            styles: [
                {
                    "elementType": "geometry",
                    "stylers": [//ignore this]
        };
        var map = new google.maps.Map(document.getElementById('map'),
            mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Dryft Revere!'
        });
    }

Answer 1

显示一个InfoWindow over a marker, see this example in the doumentation。

将此添加到您现有的代码中：

var infoWindow = new google.maps.InfoWindow({
  content: "Pier 6"
});
marker.addListener('click', function(evt) {
  infoWindow.open(map, marker);
});

proof of concept fiddle

代码片段：

function initMap() {
  var myLatlng = new google.maps.LatLng(42.3730492, -71.0499857);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,

  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Dryft Revere!'
  });
  var infoWindow = new google.maps.InfoWindow({
    content: "Pier 6"
  });
  marker.addListener('click', function(evt) {
    infoWindow.open(map, marker);
  });
  google.maps.event.trigger(marker, "click");
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>