Кластеризация карт Google не работает с одним местоположением - PullRequest
Новая
       19

Кластеризация карт Google не работает с одним местоположением

0 голосов
/ 23 января 2019

Я использую Google Map Clustering и открываю Информационные окна после нажатия на конкретный кластер с помощью 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 не определено

Но у меня могут быть такие записи.

Может кто-нибудь наставить меня, что я здесь делаю не так?Почему не работает с одним местоположением?

1 Ответ

0 голосов
/ 23 января 2019

В размещенном вами коде 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>
...