代码之家 › 专栏 › 技术社区 › Mittul At TechnoBrave

谷歌地图聚类不适用于单一位置

google-maps-markers google-maps-api-3 google-maps php javascript

0

Mittul At TechnoBrave · 技术社区 · 7 年前

我正在使用 Google Map Clustering 打开 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}, 
];

然后我的 集群点击 也不会开火 markers 单击事件。

另外,我在说……

类型错误:google.maps.clusterclick未定义

但我可以有这样的记录。

有人能指导我在这里做错什么吗?为什么不在单一地点工作?

1 回复 | 直到 7 年前

1

MrUpsidown 7 年前

在你发布的代码中, 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>