javascript - 在circle.setMap(null) Google Map Javascript API之后圆圈仍然显示

Question

当 ZoomIn/ZoomOut 事件触发时，我尝试删除所有圆圈和标记。我像这样插入了 For 循环中的每个标记和圆圈

gmarkers.push(new google.maps.Circle(circle)); // For Circles
gmlist.push(marker); // For Marker

当我想像这样清除时尝试删除

function ClearMapMaker() {
            console.log(gmlist);

            for (i = 0; i < gmlist.length; i++) {

                gmlist[i].setMap(null);
            }
            gmlist = [];
            console.log(gmarkers);
            for (i = 0; i < gmarkers.length; i++) {
                gmarkers[i].setMap(null);
            }
        }

标记被删除，但圆圈未被删除。如何删除 map 上的圆圈？这是我的完整代码。谢谢。

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCbhHXN1r0QOFwUrQSbsd0JDbRVHmEDKTM"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<script>
    var gmarkers = [];
    var gmlist = [];
    var fill_color_val = '#3888ff';
    var labelText = "1";
    var currentZoom = 0;
    $(function () {
        function initialize_map() {
            var mapProp = {
                minZoom: 11,
                maxZoom: 20,
                center: new google.maps.LatLng(16.7803886, 96.1844148),
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"), mapProp);
            bindMarkerOnMap("level_0");
        }

        initialize_map();

        map.addListener('zoom_changed', function () {
            //currentZoom = map.getZoom();
            //if (currentZoom <= 12) {
            //    ClearMapMaker();
            //    console.log(map.getZoom());
            //    bindMarkerOnMap("level_0");
            //} else if (currentZoom >= 13) {
            //    console.log("level_1 fired + " + currentZoom);
            //    ClearMapMaker()
            //    console.log(map.getZoom());
            //    bindMarkerOnMap("level_1");
            //}else if (currentZoom >= 15) {
            //    bindMarkerOnMap("level_2");
            //}
            ClearMapMaker();
        });

    });

    function bindMarkerOnMap(level) {
        console.log(level);
        if (level == "level_0") {
            console.log("level_0 binding");
            for (var i = 0; i < data.length; i++) {
                var latlng = new google.maps.LatLng(data[i].Lat, data[i].Long);

                var myOptions = {
                    content: labelText,
                    boxStyle: {
                        border: "none",
                        textAlign: "center",
                        fontSize: "10pt",
                        width: "50px"
                    },
                    disableAutoPan: true,
                    pixelOffset: new google.maps.Size(-25, -5),
                    position: latlng,
                    closeBoxURL: "",
                    isHidden: false,
                    pane: "floatPane",
                    enableEventPropagation: true
                };

                // Add circle overlay and bind to marker
                var circle = new google.maps.Circle({
                    map: map,
                    radius: 1600, // 10 miles in metres
                    fillColor: fill_color_val,
                    strokeColor: '#69DAED',
                    strokeWeight: 2,
                    fillOpacity: 1,
                });

                var marker = new google.maps.Marker({
                    position: latlng,
                    title: data[i].Author,
                    draggable: false,
                    map: map
                });
                marker.setVisible(true);

                circle.bindTo('center', marker, 'position');

                google.maps.event.addListener(circle, 'click', getInfoCallback(map, latlng));

                myOptions.content = data[i].Count;
                var ibLabel = new InfoBox(myOptions);
                ibLabel.open(map);
                gmarkers.push(new google.maps.Circle(circle));
                gmlist.push(marker);
            }
        } else if (level == "level_1") {
            console.log("level_1 binding");
            for (var i = 0; i < datadetail.length; i++) {
                var latlng = new google.maps.LatLng(datadetail[i].Lat, datadetail[i].Long);

                var myOptions = {
                    content: labelText,
                    boxStyle: {
                        border: "none",
                        textAlign: "center",
                        fontSize: "10pt",
                        width: "50px"
                    },
                    disableAutoPan: true,
                    pixelOffset: new google.maps.Size(-25, -5),
                    position: latlng,
                    closeBoxURL: "",
                    isHidden: false,
                    pane: "floatPane",
                    enableEventPropagation: true
                };

                // Add circle overlay and bind to marker
                var circle = new google.maps.Circle({
                    map: map,
                    radius: 800, 
                    fillColor: fill_color_val,
                    strokeColor: '#69DAED',
                    strokeWeight: 2,
                    fillOpacity: 1,
                });

                var marker = new google.maps.Marker({
                    position: latlng,
                    title: datadetail[i].Author,
                    draggable: false,
                    map: map
                });
                marker.setVisible(false);

                circle.bindTo('center', marker, 'position');

                google.maps.event.addListener(circle, 'click', getInfoCallback(map, latlng));

                myOptions.content = datadetail[i].Count;
                var ibLabel = new InfoBox(myOptions);
                ibLabel.open(map);
                gmarkers.push(new google.maps.Circle(circle)); // For Circles
                gmlist.push(marker); // For Marker
            }

        }
    }
        function getInfoCallback(map, latlng) {
            return function () {
                map.setZoom(15);
                map.setCenter(latlng);
            };
        }

        var data = [
            { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7803886, Long: 96.1844148, Count: 250 },
            { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9234506, Long: 96.1357186, Count: 5 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.120420, Long: 96.069629, Count: 10 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.908606, Long: 96.0619453, Count: 80 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.916317, Long: 96.274875, Count: 70 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9870346, Long: 96.0644941, Count: 60 },
        ];

        var datadetail = [
            { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7803986, Long: 96.1844148, Count: 115 },
            { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9236506, Long: 96.1357186, Count: 51 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.100420, Long: 96.069629, Count: 120 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.963606, Long: 96.0689453, Count: 870 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.916987, Long: 96.254875, Count: 780 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9877846, Long: 96.0643941, Count: 660 },
            { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7723886, Long: 96.1844148, Count: 350 },
            { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9344506, Long: 96.1357186, Count: 55 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.100420, Long: 96.069629, Count: 177 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.900606, Long: 96.0619453, Count: 25 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.919617, Long: 96.274875, Count: 57 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9877546, Long: 96.0644941, Count: 78 },
            { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7864886, Long: 96.1844148, Count: 32 },
            { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9238506, Long: 96.1388186, Count: 45 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.120420, Long: 96.096629, Count: 78 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.908646, Long: 96.0779453, Count: 34 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.922317, Long: 96.288875, Count: 12 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9827346, Long: 96.0699941, Count: 29 },
            { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7807186, Long: 96.1840148, Count: 9 },
            { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9263506, Long: 96.1342186, Count: 85 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.120420, Long: 96.064549, Count: 75 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9043606, Long: 96.06299453, Count: 63 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.915817, Long: 96.277875, Count: 19 },
            { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9870876, Long: 96.0864941, Count: 72 },
        ];



        //Clear map makers on google map
        function ClearMapMaker() {
            console.log(gmlist);

            for (i = 0; i < gmlist.length; i++) {

                gmlist[i].setMap(null);
            }
            gmlist = [];
            console.log(gmarkers);
            for (i = 0; i < gmarkers.length; i++) {
                gmarkers[i].setMap(null);
            }
        }
</script>
}

Answer 1

您创建了两次圈子:

这里:

var circle = new google.maps.Circle({
    map: map,
    radius: 1600, // 10 miles in metres
    fillColor: fill_color_val,
    strokeColor: '#69DAED',
    strokeWeight: 2,
    fillOpacity: 1,
});

这里:

gmarkers.push(new google.maps.Circle(circle));

只需更改最后一行即可:

gmarkers.push(circle);