Question

我正在尝试制作一张Google地图 a）infoWindows点击， b）fitBounds on load和 c）标记的聚类。

我已经能够让前两个工作，但无法弄清楚为什么群集不起作用。任何指针都将非常感激。感谢

这是我的代码：

  <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/

Answer 1

我不明白你想要什么。但是MARKClustering代码在下面。

//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'});

谷歌地图标记聚类不适用于infoWindow和fitBounds

1 个答案: