javascript - Google Map Clustering不适用于单个位置

我使用Google Map Clustering并使用clusterclick单击特定群集后打开Info Windows，这绝对正常。

但是，当我只有一个位置时，它不在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 click事件。

我也说错了..


  TypeError：google.maps.clusterclick未定义


但是我可以有这样的记录。

有人可以指导我我在做什么错吗？为什么它不能在单个位置工作？

最佳答案

在您发布的代码中，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>