Кластеризация Google Maps API работает только один раз - PullRequest
Новая
       27

Кластеризация Google Maps API работает только один раз

0 голосов
/ 13 апреля 2020

Я создал карту Google Maps и хотел использовать кластеризацию маркеров. Работает при первой загрузке карты. Но как только я увеличиваю и уменьшаю масштаб карты, кластеры больше не создаются и точки отображаются по отдельности. Можете ли вы сказать мне, где ошибка в моем коде? 

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 'City' , 'Country', '+39 123 4567', 'hello@hello.com', 'www.hello.com'],
    ['Coogee Beach', -33.923036, 151.259052,,'Germany','+39 123 4567',,'www.hello.com'],
                ];


    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
        disableDefaultUI: true,
        center: new google.maps.LatLng(24.846565, 19.766607),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
	});
  
  var infowindow = new google.maps.InfoWindow();


    var markers = [];  
    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
			markers.push(marker);
			
			var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
            
      function getDescription(i) {
  var result = `<div class="inside">
    <span>${locations[i][0]}</span>
    ${locations[i][3]} • ${locations[i][4]}<table><tbody>`;
  if (locations[i][5]) result += `<tr><td width="60">Tel.:</td>
    <td><a href="tel:${locations[i][5]}">${locations[i][5]}</a></td></tr>`;
  if (locations[i][6]) result += `<tr><td width="60">Email:</td>
    <td><a href="mailto:${locations[i][6]}">${locations[i][6]}</a></td></tr>`;
  if (locations[i][7]) result += `<tr><td width="60">Web:</td>
    <td><a href="http://${locations[i][7]}" target="_blank">
    ${locations[i][7]}</a></td></tr>`
  result += `</tbody></table></div>`;
  return result;
}	    


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(getDescription(i));
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
...