如何实现Google Map标记聚类？已引入必要脚本，请求排查代码错误

看起来你在实现自定义Marker并结合聚类功能时碰到了问题，我从你给出的代码片段入手，梳理几个常见的坑和修复方向：

一、修复CustomMarker的OverlayView继承问题 #

你当前用的原型继承写法是旧的方式，容易引发实例属性共享的问题，而且OverlayView必须实现onAdd()、draw()、onRemove()三个核心方法，否则一定会报错。

推荐改成正确的继承写法，并补全核心方法：

function CustomMarker(latlng, map, imageSrc) {
  this.latlng_ = latlng;
  this.imageSrc = imageSrc;
  // 调用父类构造函数
  google.maps.OverlayView.call(this);
  this.setMap(map);
}

// 正确的原型继承
CustomMarker.prototype = Object.create(google.maps.OverlayView.prototype);
CustomMarker.prototype.constructor = CustomMarker;

// 必须实现的OverlayView方法：添加DOM元素到地图
CustomMarker.prototype.onAdd = function() {
  const div = document.createElement('div');
  div.style.position = 'absolute';
  div.style.width = '30px';
  div.style.height = '30px';
  div.innerHTML = `<img src="${this.imageSrc}" style="width:100%;height:100%;" />`;
  this.div_ = div;
  
  // 添加到地图的overlay图层
  const panes = this.getPanes();
  panes.overlayImage.appendChild(div);
};

// 必须实现的OverlayView方法：根据经纬度计算像素位置
CustomMarker.prototype.draw = function() {
  const projection = this.getProjection();
  const pixelPos = projection.fromLatLngToDivPixel(this.latlng_);
  
  if (!pixelPos) return;
  // 调整偏移，让图标中心对准经纬度点
  this.div_.style.left = `${pixelPos.x - 15}px`;
  this.div_.style.top = `${pixelPos.y - 30}px`;
};

// 必须实现的OverlayView方法：移除DOM元素
CustomMarker.prototype.onRemove = function() {
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};

二、让CustomMarker兼容MarkerClusterer #

官方的MarkerClusterer默认只识别原生google.maps.Marker，所以需要给CustomMarker添加聚类器依赖的方法：

// 提供getPosition方法，聚类器需要获取标记位置
CustomMarker.prototype.getPosition = function() {
  return this.latlng_;
};

// 重写setMap方法，确保父类方法被正确调用
CustomMarker.prototype.setMap = function(map) {
  google.maps.OverlayView.prototype.setMap.call(this, map);
};

三、正确初始化聚类器 #

确保你已经正确引入了MarkerClusterer脚本（顺序必须在Google Maps API之后），然后按以下步骤初始化：

// 初始化地图（你的现有代码可以保留）
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 17,
  center: new google.maps.LatLng(48.42216, 44.31308),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

// 遍历数据创建CustomMarker实例
const markers = [];
data.forEach(item => {
  const marker = new CustomMarker(
    new google.maps.LatLng(item.lat, item.lng),
    map,
    item.imageSrc
  );
  markers.push(marker);
});

// 初始化聚类器
const markerCluster = new MarkerClusterer(map, markers, {
  // 可选：自定义聚类图标路径，这里用官方示例图标
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

四、常见错误排查点 #

• 脚本加载顺序：必须按「Google Maps API → MarkerClusterer → 你的自定义代码」的顺序加载，否则会出现MarkerClusterer未定义或google未定义的错误。
• API权限检查：确保你的Google Maps API密钥已启用「Maps JavaScript API」，并且没有超过配额，否则地图无法加载，后续代码全部失效。
• 控制台错误信息：打开浏览器开发者工具（F12）查看控制台的具体错误，比如如果提示onAdd is not a function，就是你没实现OverlayView的核心方法。

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