Google Maps API如何动态设置缩放级别保证目标标记脱离聚合显示infoWindow

针对固定缩放级别16可能导致目标标记仍处于聚合簇无法弹出infoWindow的问题，提供两种可行修改方案：

方案一：动态计算缩放至标记脱离聚合的临界值 #

核心逻辑 #

新增判断标记是否被聚合的工具函数，在定位到目标标记后逐步放大缩放级别，直到标记脱离聚合簇或达到地图最大缩放级别，再触发infoWindow弹出。

代码修改 #

1. 重写isMarkerClustered函数，返回当前标记是否被聚合的布尔值：

function isMarkerClustered(marker) {
  if (!markerCluster || !markerCluster.clusters_) return false;
  for (let i = 0; i < markerCluster.clusters_.length; i++) {
    const clusterMarkers = markerCluster.clusters_[i].getMarkers();
    if (clusterMarkers.some(m => m === marker)) {
      return true;
    }
  }
  return false;
}

2. 替换ShowInfo函数的硬编码缩放逻辑：

function ShowInfo(MrkIdSel) {
  let IdxFound = -1;
  for (let a = 0; a < markersC.length; a++) {
    if (markersC[a].loc_id == MrkIdSel) {
      IdxFound = a;
      break;
    }
  }
  if (IdxFound === -1) return;
  const targetMarker = markersA[IdxFound];
  const bounds = new google.maps.LatLngBounds(targetMarker.position);
  map.fitBounds(bounds);
  setTimeout(function() {
    let currentZoom = map.getZoom();
    // 循环放大直到标记脱离聚合或达到最大缩放级别21
    const zoomCheckTimer = setInterval(() => {
      if (!isMarkerClustered(targetMarker) || currentZoom >= 21) {
        clearInterval(zoomCheckTimer);
        google.maps.event.trigger(targetMarker, "click", {});
        return;
      }
      currentZoom++;
      map.setZoom(currentZoom);
    }, 50);
  }, 125);
}

方案二：初始禁用聚合，用户缩小后再启用 #

核心逻辑 #

初始加载时不开启聚合功能，直接将地图缩放到16级并弹出目标标记的infoWindow，监听地图缩放事件，当用户缩小到小于16级时关闭infoWindow并启用聚合，缩放回到16级及以上时再关闭聚合恢复单个标记显示。

代码修改 #

1. 新增全局变量记录聚合启用状态：

var clusterEnabled = false;

2. 修改setMarkers函数，移除循环结束后的聚合初始化逻辑，新增缩放事件监听：

function setMarkers() {
  console.log("setMarkers")
  for (var i = 0; i < points.length; i++) {
    var point = points[i];
    var contentString = '<div class="marker-infowindow">' + '<h2>' + point[0] + '</h1>' + '<div></div></div>';

    var marker = new google.maps.Marker({
      position: {
        lat: point[2],
        lng: point[3]
      },
      map: map,
      title: point[0],
      loc_id: point[4],
      loc_txt: contentString,
    });
    markersA.push(marker);
    markersC.push(marker);
    MkrClick(marker, contentString, point);
  }
  // 初始弹出目标标记infoWindow
  if (MrkId != 0) {
    ShowInfo(MrkId)
  }
  // 监听地图缩放事件
  map.addListener('zoom_changed', () => {
    const currentZoom = map.getZoom();
    // 缩小到16级以下时开启聚合
    if (currentZoom < 16 && !clusterEnabled) {
      infowindow.close();
      markerCluster = new MarkerClusterer(map, markersC, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
      });
      clusterEnabled = true;
    }
    // 放大到16级及以上时关闭聚合
    if (currentZoom >= 16 && clusterEnabled) {
      markerCluster.clearMarkers();
      markerCluster = null;
      markersC.forEach(m => m.setMap(map));
      clusterEnabled = false;
    }
  })
}

3. 修改ShowInfo函数，直接固定缩放16级即可：

function ShowInfo(MrkIdSel) {
  let IdxFound = -1;
  for (let a = 0; a < markersC.length; a++) {
    if (markersC[a].loc_id == MrkIdSel) {
      IdxFound = a;
      break;
    }
  }
  if (IdxFound === -1) return;
  const targetMarker = markersA[IdxFound];
  map.panTo(targetMarker.position);
  map.setZoom(16);
  google.maps.event.trigger(targetMarker, "click", {});
}

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