请求协助为现有Google Maps代码集成Marker Clusterer标记聚类功能

阿华AIGC实验室

2026-5-12

整合MarkerClusterer到你的Google Maps代码

别担心，我一步步给你讲怎么整合，哪怕没JS基础也能轻松搞定～

首先，你需要先确保MarkerClusterer的脚本已经引入到你的页面里——因为它不是Google Maps原生自带的工具，得额外加这个引用。把下面这行代码放在你引入Google Maps API的脚本之后：

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

接下来，按照这几个简单步骤修改你的现有代码：

1. 创建一个空数组来存放所有标记

在你开始创建地图标记之前，先声明一个数组，用来装所有你要添加到地图上的标记：

var markers = [];

2. 把每个创建好的标记加入数组

假设你现在的代码是这样创建标记和信息窗口的（类似下面的结构）：

// 示例：创建单个标记
var marker = new google.maps.Marker({
  position: {lat: 纬度值, lng: 经度值},
  map: map,
  title: '标记标题'
});

// 绑定自定义信息窗口
var infoWindow = new google.maps.InfoWindow({
  content: '<div>你的自定义信息内容</div>'
});

marker.addListener('click', function() {
  infoWindow.open(map, marker);
});

现在，你只需要在每个标记创建完成后，把它push到刚才的markers数组里：

// 创建标记后添加这一行
markers.push(marker);

如果是循环创建多个标记（比如从数据里批量生成），就在循环里每次创建完marker后执行markers.push(marker)就行。

3. 初始化标记聚类

等所有标记都创建完成、并且都加入到markers数组之后，再执行你拿到的那段聚类代码：

var markerCluster = new MarkerClusterer(map, markers, {
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

完整的示例代码参考

这里给你一个完整的整合后的代码示例，你可以对照着改自己的代码：

<!DOCTYPE html>
<html>
<head>
  <title>带聚类的Google Maps</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥"></script>
  <!-- 引入MarkerClusterer脚本 -->
  <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    function initMap() {
      // 初始化地图
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: 39.9042, lng: 116.4074} // 示例中心点：北京
      });

      // 1. 创建空标记数组
      var markers = [];

      // 2. 创建标记并加入数组（示例：3个标记）
      // 标记1
      var marker1 = new google.maps.Marker({
        position: {lat: 39.9042, lng: 116.4074},
        map: map
      });
      var infoWindow1 = new google.maps.InfoWindow({content: '<h3>北京天安门</h3>'});
      marker1.addListener('click', () => infoWindow1.open(map, marker1));
      markers.push(marker1);

      // 标记2
      var marker2 = new google.maps.Marker({
        position: {lat: 39.915, lng: 116.403},
        map: map
      });
      var infoWindow2 = new google.maps.InfoWindow({content: '<h3>故宫</h3>'});
      marker2.addListener('click', () => infoWindow2.open(map, marker2));
      markers.push(marker2);

      // 标记3
      var marker3 = new google.maps.Marker({
        position: {lat: 39.9289, lng: 116.3883},
        map: map
      });
      var infoWindow3 = new google.maps.InfoWindow({content: '<h3>天坛</h3>'});
      marker3.addListener('click', () => infoWindow3.open(map, marker3));
      markers.push(marker3);

      // 3. 初始化聚类
      var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
      });
    }

    // 页面加载完成后初始化地图
    window.onload = initMap;
  </script>
</body>
</html>

注意事项

一定要把markerCluster的初始化代码放在所有标记都创建并加入数组之后，不然聚类会漏掉标记。
替换代码里的你的API密钥为你自己的Google Maps API密钥。
你提供的imagePath是Google官方的聚类图标路径，这个是可以正常使用的，如果想换自定义图标，只需要修改这个路径即可（比如换成你自己服务器上的图标前缀）。

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