Не работает кластер маркеров карт Google с infoWindow и fitBounds - PullRequest
Новая
       8

Не работает кластер маркеров карт Google с infoWindow и fitBounds

0 голосов
/ 31 мая 2018

Я пытаюсь создать карту Google, в которой есть а) информационные окна по щелчку, б) подгонка границ при загрузке и в) кластеризация маркеров.

Мне удалось заставить первые два работать, но я не могу понять, почему кластеризация не работает.Любые указатели будут с благодарностью.Спасибо

Вот мой код: 

  <script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: {
        lat: -31.730513,
        lng: 132.008632
      }
    });
    setMarkers(map);
  }

  // markers variable
  var locations = [
    ['Cairns', -16.978165, 145.712778, 6],
    ['Bondi Beach', -33.890542, 151.274856, 5],
    ['Wollangong', -34.439390, 150.796039, 4],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Mandurah', -32.557420, 115.783668, 2],
    ['Perth', -32.080768, 115.778525, 1]

  ];

  // info window variable
  var locInfo = [
    ['<div class="map-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div>'],
  ];

  // Adds markers to the map.
  function setMarkers(map) {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < locations.length; i++) {
      var marks = locations[i];
      var myLatLng = new google.maps.LatLng(marks[1], marks[2]);
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
      });
      bounds.extend(myLatLng);
      var infoWindow = new google.maps.InfoWindow(),
        marker, i;
      // Add info window to marker    
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infoWindow.setContent(locInfo[i][0]);
          infoWindow.open(map, marker);
        }
      })(marker, i));
    }
    map.fitBounds(bounds);
    var markerCluster = new MarkerClusterer(map);
  }

</script>

https://jsfiddle.net/benct/vpc613pe/

1 Ответ

0 голосов
/ 31 мая 2018

Я не понимаю, что вы хотите.Но код кластерного маркера находится ниже. 

//original code
//var markerCluster = new MarkerClusterer(map);

var markers = locations.map(function(location, i) {
  return new google.maps.Marker({
    position: new google.maps.LatLng(marks[1], marks[2])
  });
});
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
...