Google Maps标记聚合失效：已实现InfoWindow与fitBounds功能

我帮你排查了下代码，标记聚合功能没生效主要有两个核心问题，咱们一步步修复：

问题1：缺少MarkerClusterer的依赖库 #

Google Maps的标记聚合功能（MarkerClusterer）并不是地图核心API自带的，你需要单独引入对应的脚本文件才能使用。可以添加这个CDN链接到你的HTML中：

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

问题2：未将标记传入聚合器 #

你代码里创建了MarkerClusterer实例，但没有把循环生成的标记传递给它，聚合器根本不知道要处理哪些标记。需要做这两步修改：

• 先创建一个数组来存储所有生成的标记
• 初始化聚合器时把这个数组传进去

修改后的完整代码 #

<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]
];

// 注意：这里要给每个标记对应一个InfoWindow内容，否则点击后面的标记会报错
var locInfo = [
  ['<div class="map-text"><p>Cairns的介绍内容...</p></div>'],
  ['<div class="map-text"><p>Bondi Beach的介绍内容...</p></div>'],
  ['<div class="map-text"><p>Wollangong的介绍内容...</p></div>'],
  ['<div class="map-text"><p>Cronulla Beach的介绍内容...</p></div>'],
  ['<div class="map-text"><p>Mandurah的介绍内容...</p></div>'],
  ['<div class="map-text"><p>Perth的介绍内容...</p></div>'],
];

// Adds markers to the map.
function setMarkers(map) {
  var bounds = new google.maps.LatLngBounds();
  // 创建数组存储所有标记
  var markers = [];
  
  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);
    // 将标记加入数组
    markers.push(marker);

    var infoWindow = new google.maps.InfoWindow();
    // 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, markers });
}
</script>
<!-- 别忘了引入MarkerClusterer的依赖 -->
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

额外提示 #

你的locInfo数组目前只有1个元素，但locations有6个标记，点击第2到第6个标记时会因为locInfo[i]不存在而报错，我在修改后的代码里已经补全了对应内容，你可以替换成实际的介绍文本。

内容的提问来源于stack exchange，提问作者BENCT