javascript - 谷歌地图聚类不适用于单个位置

Question

我正在使用 Google Map Clustering和开幕Info Windows使用 clusterclick 单击特定集群后，效果非常好。

但是，当我只有一个位置时，它不会进入 clusterclick 事件，因此我无法打开我的信息窗口。

我正在尝试添加以下事件，但当我将单个位置作为数据时它不会触发。

google.maps.event.addListener(markers, 'click', (function (markers) {
                         alert('markersclick');

                    })(markers));

                     google.maps.event.addListener(map, 'click', function () {
                        alert('mapclick');
                    });

这是我的完整源代码(我没有添加信息窗口代码，因为甚至没有触发以上事件)。

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

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"> 
</script>



<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script>
    function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';


  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

                google.maps.event.addListener(markers, 'click', (function (markers) {
                         alert('markersclick');

                    })(markers));

                     google.maps.event.addListener(map, 'click', function () {
                        alert('mapclick');
                    });

  // 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',
       gridSize: 100,
  zoomOnClick: true,
  maxZoom: 10});

  google.maps.clusterclick.addListener(markerCluster, "clusterclick", function(cluster, event) {
      alert('hey');
  });
}
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
    {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
    {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312},
  {lat: -31.563910, lng: 147.154312},
   {lat: -31.563910, lng: 147.154312}
];

initMap();
</script>

<style>
    #map {
  height: 100%;
}
</style>

如果我将 locations 数组更改为这样的内容。

var locations = [
  {lat: -31.563910, lng: 147.154312}, 
];

然后我的 clusterclick 没有触发以及 markers 点击事件。

我也收到一条错误消息......

TypeError: google.maps.clusterclick is undefined

但我可以有这样的记录。

有人可以指导我这里做错了什么吗？为什么它不适用于单个位置？

Answer 1

在您发布的代码中，markers 是一组 google.maps.Marker 对象。您不能在数组上添加监听器。您必须遍历数组并将监听器分别添加到每个 Marker。

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -28.024,
      lng: 140.887
    }
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  var locations = [{
      lat: -31.563510,
      lng: 147.154312
    },
    {
      lat: -31.563610,
      lng: 147.154312
    },
    {
      lat: -31.563710,
      lng: 147.154312
    },
    {
      lat: -31.563810,
      lng: 147.154312
    }
  ];

  var markers = [];

  var infowindow = new google.maps.InfoWindow();

  for (var i = 0; i < locations.length; i++) {

    var marker = new google.maps.Marker({
      position: locations[i],
      map: map,
      label: labels[i % labels.length]
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent('Label: ' + this.getLabel());
      infowindow.open(map, this);
    });

    markers.push(marker);
  }

  // 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',
    gridSize: 100,
    zoomOnClick: true,
    maxZoom: 10
  });
}


initMap();

#map {
  height: 200px;
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>