Google Maps API标记超256个后不可点击问题求助

我可以通过google.maps.Map()添加超过256个带EventListener（绑定InfoWindow）的标记，但最多只能让256个标记保持可点击状态。我通过按钮切换标记的显示状态，一旦可见标记数量超过256个，标记虽然还能看见，但点击完全失效，必须重新加载页面才能恢复功能。

现有代码 #

var arrayLength = points.length;
for (var i = 0; i < arrayLength; i++) {
    var marker = addMarker(points[i], map);
    marker.setMap(map);
}

function addMarker(point, map) {
    var infowindow = new google.maps.InfoWindow();

    var iconColor = (point.type == 'circle') ? "/images/circle.png" : "/images/pointer_" + point.clr.replace("#","").png";
    var size = (point.type == 'circle') ? '20' : '10';
    var goldStar = {
        url: iconColor,
        scaledSize: new google.maps.Size(size,15)
    };
    var marker = new google.maps.Marker({
        position: point.latlng,
        title: "" + point.crDate + "",
        icon: goldStar,
        visible: false,
    });
    google.maps.event.addListener(marker, "click", function() {
        infowindow.close();
        infowindow.setContent( 
            '<div style="cursor:pointer;text-decoration:underline;" onClick="window.opener.getQIDData(' 
            + point.qid 
            + ',\'\',' 
            + point.t 
            +',\'' 
            + point.afd 
            + '\')">'
            + point.crDate 
            + '<br>' 
            + point.afd 
            + '<br>' 
            + point.pers 
            + '<br>' 
            + point.qid 
            +'</div>' );
        infowindow.open(map, marker);
    });
    return marker;
}

var markerGroups = {
    "l-m": [],
    "o-m": [],
    "o-m2": [],
    "r-m": [],
    "r-b": [],
    "r-bb": [],
    "p-2": [],
    "p-3": [],
    "a-i": [],
    "a-b": [],
    "a-bl": [],
    "a-on": [],
    "a-old": [],
    "a-youri": [],
    "sms": [],
    "l-1": [],
    "l-2": []
};

//    'type' is the selected (pressed) button, corresponding to the markerGroups 
function toggleGroup(type) {
    var count = 0;
    //    buttons with .selected have no points visible (counter-intuitive, sorry ;-))
    $(" ." + type).toggleClass("selected");
    for (var group in markerGroups) {
        if (!$("." + group).hasClass("selected")) {
            count = (count + markerGroups[group].length);
        }
    }
    
    //  clear all markers before putting new on screen if count > 256
    if (count > 256) {
        for (var group in markerGroups) {
            markerGroups[group].forEach(marker => marker.setVisible(false));
            $(" ." + group).addClass("selected");
        }
    }

    for (var group in markerGroups) {
        var state = ($("." + group).hasClass("selected"))
            ?   false
            :   true;
        if (type == group) {
            markerGroups[group].forEach(marker => marker.setVisible(state));
        }
    }
}

问题原因 #

这个256个可交互标记的限制是Google Maps JavaScript API早期版本的内部限制，当页面同时存在超过256个绑定事件监听器的可见标记时，API无法正确处理所有标记的交互逻辑，导致超出部分的标记点击失效。此外，你的addMarker函数还存在闭包问题：循环中使用var声明变量，导致所有标记的点击事件都引用最后一个point对象，会进一步加剧交互异常。

解决方法 #

1. 标记聚类（推荐）

使用MarkerClusterer库将地理位置接近的标记合并为聚类图标，减少屏幕上同时显示的标记数量，既解决交互问题，也提升地图加载性能。点击聚类时会放大地图并显示该区域的具体标记：

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

2. 优化事件绑定方式

不给每个标记单独绑定点击事件，改为监听地图的点击事件，通过坐标匹配找到被点击的标记：

google.maps.event.addListener(map, 'click', function(e) {
  // 遍历可见标记，判断点击坐标是否在标记范围内（10米阈值可调整）
  markers.forEach(function(marker) {
    if (marker.getVisible() && google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), e.latLng) < 10) {
      // 触发原标记的点击逻辑
      infowindow.setContent(/* 对应标记的内容 */);
      infowindow.open(map, marker);
      return;
    }
  });
});

3. 动态管理标记生命周期

不要一次性创建所有标记，而是根据当前显示的分组动态创建和销毁标记，保证屏幕上的标记数量始终不超过256个：

• 切换分组时，先销毁当前所有可见标记
• 再创建当前需要显示的标记组

4. 修复闭包问题

将addMarker中的事件绑定改为使用IIFE（立即执行函数表达式）或let声明变量，保存每个point的独立引用：

// 修改addMarker中的事件绑定部分
google.maps.event.addListener(marker, "click", (function(currentPoint) {
  return function() {
    infowindow.close();
    infowindow.setContent( 
      '<div style="cursor:pointer;text-decoration:underline;" onClick="window.opener.getQIDData(' 
      + currentPoint.qid 
      + ',\'\',' 
      + currentPoint.t 
      +',\'' 
      + currentPoint.afd 
      + '\')">'
      + currentPoint.crDate 
      + '<br>' 
      + currentPoint.afd 
      + '<br>' 
      + currentPoint.pers 
      + '<br>' 
      + currentPoint.qid 
      +'</div>' );
    infowindow.open(map, marker);
  };
})(point));

5. 升级API版本

检查当前使用的Google Maps API版本，升级到最新稳定版，新版本已移除该256标记的限制。

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