将谷歌地图MarkerClusterer与infowindow集成

Question

我正在尝试将InfoWindow放置在使用MarkerClusterer分组的多个标记中，但没有成功。我只能生成带有信息窗口或聚类的地图；无法同时使用两者。在网络上搜索使我更加困惑....

起点是google开发者页面：根据我的需求，我创建了以下代码：

    <div id="map"></div>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: {lat: -15.7942357, lng: -47.8821945}
        });

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
    {lat: -19.9286,     lng: -43.93888},
    {lat: -19.85758,    lng: -43.9668},
    {lat: -18.24587,    lng: -43.59613},
    {lat: -20.46427,    lng: -45.42629},
    {lat: -20.37817,    lng: -43.41641},
    {lat: -20.09749,    lng: -43.48831},
    {lat: -21.13594,    lng: -44.26132},
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>

然后我就停在这里了。InfoWindow中显示的代码调用的是除“locations”之外的其他对象。尝试得越多，结果越糟糕...

我想给每个标记添加简单的信息：仅标题和每个标记的唯一网址。

有人可以帮忙吗？

- Carlos Nascimento

Answer 1

将每个标记点的“唯一信息”添加到您的位置数组中（例如这个问题的答案：Google Maps JS API v3 - 简单多重标记示例）。

为每个标记点添加一个点击监听器，以打开包含该唯一内容的信息窗口。

var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
  var marker = new google.maps.Marker({
    position: location
  });
  google.maps.event.addListener(marker, 'click', function(evt) {
    infoWin.setContent(location.info);
    infoWin.open(map, marker);
  })
  return marker;
});

演示fiddle

代码片段:

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: -15.7942357,
      lng: -47.8821945
    }
  });
  var infoWin = new google.maps.InfoWindow();
  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    var marker = new google.maps.Marker({
      position: location
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
      infoWin.setContent(location.info);
      infoWin.open(map, marker);
    })
    return marker;
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m'
    // 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

}
var locations = [{
  lat: -19.9286,
  lng: -43.93888,
  info: "marker 1"
}, {
  lat: -19.85758,
  lng: -43.9668,
  info: "marker 2"
}, {
  lat: -18.24587,
  lng: -43.59613,
  info: "marker 3"
}, {
  lat: -20.46427,
  lng: -45.42629,
  info: "marker 4"
}, {
  lat: -20.37817,
  lng: -43.41641,
  info: "marker 5"
}, {
  lat: -20.09749,
  lng: -43.48831,
  info: "marker 6"
}, {
  lat: -21.13594,
  lng: -44.26132,
  info: "marker 7"
}, ];

google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<!-- was https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js -->
<div id="map"></div>

- geocodezip