[Google Maps Javascript两个InfoWindow用于同一标记

Question

我想添加一个始终可见的infoWindow（类似于标题标签，但始终可见），以及另一个当用户单击标记（即正常行为）时显示的infoWindow。目前，我用于添加标记的for循环如下所示：

for (i = 0; i < markers.length; i++) {
        var data = markers[i];
        var icon = "";
        icon = "/images/map-icon.png";
        var position = new google.maps.LatLng(data.lat, data.lng);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: data.title,
            icon: new google.maps.MarkerImage(icon)
        });

        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);

                infoWindow.open(map, marker);
            });
        })(marker, data);

        map.fitBounds(bounds);
        map.setCenter(bounds.getCenter());
        map.fitBounds(bounds);
    }

Answer 1

[一个选项：为每个标记创建一个固定的InfoWindow，在创建时会打开它，然后是一个具有“正常” InfoWindow行为的动态InfoWindow，它将在固定的InfoWindow顶部打开。

for (i = 0; i < markers.length; i++) {
  var data = markers[i];
  var position = new google.maps.LatLng(data.lat, data.lng);
  bounds.extend(position);
  marker = new google.maps.Marker({
    position: position,
    map: map,
    title: data.title,
  });
  // fixed always open InfoWindow
  marker.iw = new google.maps.InfoWindow();
  marker.iw.setContent(data.title);
  marker.iw.open(map, marker);

  // dynamic InfoWindow, opened on click
  (function(marker, data) {
    google.maps.event.addListener(marker, "click", function(e) {
      infoWindow.setContent(data.description);
      infoWindow.open(map, marker);
    });
  })(marker, data);

  map.fitBounds(bounds);
}

proof of concept fiddle

代码段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: -33.9,
      lng: 151.2
    }
  });

  setMarkers(map);
}

var markers = [{
    description: 'Bondi Beach',
    lat: -33.89042,
    lng: 151.274856,
    title: "Bondi"
  },
  {
    description: 'Coogee Beach',
    lat: -33.923036,
    lng: 151.259052,
    title: "Coogee"
  },
  {
    description: 'Cronulla Beach',
    lat: -34.028249,
    lng: 151.157507,
    title: "Cronulla"
  },
  {
    description: 'Manly Beach',
    lat: -33.80010128657071,
    lng: 151.28747820854187,
    title: "Manly"
  },
  {
    description: 'Maroubra Beach',
    lat: -33.950198,
    lng: 151.259302,
    title: "Maroubra"
  }
];

function setMarkers(map) {
  var infoWindow = new google.maps.InfoWindow();
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < markers.length; i++) {
    var data = markers[i];
    var position = new google.maps.LatLng(data.lat, data.lng);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: data.title,
    });
    marker.iw = new google.maps.InfoWindow();
    google.maps.event.addListener(marker.iw, 'domready', function() {
      // warning relies on undocumented API behavior
      $("button.gm-ui-hover-effect").hide();
    });
    marker.iw.setContent(data.title);
    marker.iw.open(map, marker);


    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent(data.description);

        infoWindow.open(map, marker);
      });
    })(marker, data);

    map.fitBounds(bounds);
  }
}

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

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