Google Maps API overlaycomplete仅识别首次绘制图形问题求助

问题根源 #

你代码里的核心问题是用了google.maps.event.addListenerOnce来监听overlaycomplete事件——这个方法只会执行一次回调，首次绘制图形触发后，监听器就会被自动移除，所以第二次及以后的绘制操作完全不会触发事件处理逻辑，自然也不会更新选中标记或清除旧图形。

修复方案 #

1. 将addListenerOnce替换为addListener，让监听器持续监听每次绘制完成事件
2. 每次处理新绘制的图形前，清空selectedMarkers数组，避免重复累积选中的标记ID
3. 保留原有清除旧图形的逻辑，确保每次绘制只显示当前的图形

修改后的完整代码 #

var map;
var marker;
let markers = [];
let selectedMarkers = []
let all_overlays = [];
var addresses = {{CLAIMS-JSON||[]}};
const mapElement = document.getElementById("map");

function initMap() {
    var latlng = new google.maps.LatLng(30.6954, -88.0399);
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: latlng,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(mapCanvas, mapOptions);
    const drawingManager = new google.maps.drawing.DrawingManager({
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                google.maps.drawing.OverlayType.CIRCLE,
                google.maps.drawing.OverlayType.POLYGON,
            ],
        },
        circleOptions: {
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1,
        },
        polygonOptions: {
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1,
        }
    });

    drawingManager.setMap(map);

    let markerCluster = new markerClusterer.MarkerClusterer({markers, map});
    let markersArray = [];
    addresses.forEach(address => {
        let claimLat = address.lat;
        let claimLng = address.long;
        let claimLocation = new google.maps.LatLng(claimLat, claimLng);

        map.setCenter(claimLocation);

        var infowindow = new google.maps.InfoWindow({
            content: '<b>' + address.id + '</b>',
            size: new google.maps.Size(150, 50)
        });
        marker = new google.maps.Marker({
            position: claimLocation,
            map: map,
            title: String(`${address.id}: ${address.address}`),
        });
        marker.set("id", address.id);
        markersArray.push(marker);
        markerCluster.addMarker(marker);

    })
    // 替换addListenerOnce为addListener，持续监听事件
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
        let paths = []
        // 清空之前选中的标记，避免重复累积
        selectedMarkers = [];
        // 清除旧图形
        for (var i=0; i < all_overlays.length; i++)
        {
            console.log("clearing all overlays:" + all_overlays[i]);
            all_overlays[i].overlay.setMap(null);
        }
        all_overlays = [];
        
        if(event.type == 'circle') {
            all_overlays.push(event);
            console.log(all_overlays);
            const center = event.overlay.getCenter();
            const radius = event.overlay.getRadius();
            let markerLat;
            let markerLng;
            markersArray.forEach((mark) => {
                markerLat = mark.getPosition().lat();
                markerLng = mark.getPosition().lng();
                markerLoc = new google.maps.LatLng(markerLat, markerLng);
                let checkDistance = google.maps.geometry.spherical.computeDistanceBetween(center, markerLoc);
                if(checkDistance <= radius){
                    selectedMarkers.push(mark.id);
                }
            })
        }else if (event.type == 'polygon'){
            all_overlays.push(event);
            console.log(all_overlays);
            paths = event.overlay.getPath();
            let polygon = new google.maps.Polygon({paths: paths});

            markersArray.forEach((mark) => {
                markerLat = mark.getPosition().lat();
                markerLng = mark.getPosition().lng();
                markerLoc = new google.maps.LatLng(markerLat, markerLng);
                let isWithinPolygon = google.maps.geometry.poly.containsLocation(markerLoc, polygon);
                if(isWithinPolygon){
                    selectedMarkers.push(mark.id);
                }
            })
        }
        $('#map-select-claims-button').show();
    });

}

window.initMap = initMap;

$('.clearMap').on('click', function() {
    console.log("clicked");
    console.log(all_overlays.length)
    for (var i=0; i < all_overlays.length; i++)
    {
        console.log("clearing all overlays:" + all_overlays[i]);
        all_overlays[i].overlay.setMap(null);
    }
    all_overlays = [];
    // 清除图形时同步清空选中标记，保持数据一致性
    selectedMarkers = [];
})

额外优化说明 #

• 在清除按钮的点击事件里新增了selectedMarkers = [];，确保清除图形时同时清空选中的标记ID，避免数据残留
• 保留了你原有清除旧图形的逻辑，确保每次绘制只保留最新的图形

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