Google Maps API 覆盖完成仅识别第一张图

Question

我有一个谷歌地图，允许用户在他们想要选择的标记周围绘制一个圆圈或多边形。只要他们可以绘制形状，点击选择标记按钮，然后选择这些标记，它就可以发挥作用。我有一个清晰的地图按钮，单击该按钮会删除绘制的形状。

如果他们想要绘制额外的形状，就会出现问题。第一个之后绘制的任何内容都不会被事件侦听器拾取（因为没有控制台日志被触发）。形状会绘制，但由于听众没有拾取它，因此无法将它们从地图上清除，也无法使用它们来选择不同或附加的标记。

这是我的代码示例：

    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);
    // The map, centered at Uluru
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: latlng,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(mapCanvas, mapOptions);
    //create drawingManager so users can draw on the map
    const drawingManager = new google.maps.drawing.DrawingManager({
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER, //top center drawing menu
            drawingModes: [
                google.maps.drawing.OverlayType.CIRCLE,  //allow circle or polygon only
                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);

    })
    google.maps.event.addListenerOnce(drawingManager, 'overlaycomplete', function(event) {
        let paths = []
        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;

    //the button to clear the map
    $('.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 = [];
    })

我尝试过在 if 语句内以及“let paths = []”下方的事件侦听器顶部推送到 all_overlays，但这都会导致相同的行为。第一个叠加层已被识别，我可以清除它。其他的则不然。

Answer 1

打字错误。

google.maps.event.addListenerOnce(drawingManager, 'overlaycomplete', function(event) {...}

应该是：

google.maps.event.addListenerOnce(drawingManager, 'overlaycomplete', function(event) {...}