Javascript Google Maps V3 - 删除所有标记

Google Maps V3 - Remove all Markers

提问by user1386421

I want with google maps v3 that if you zoom-in higher than 15 the map show the marker locations but when you zoom-out i want to hide the markers. I can't find any function to do this. Nothing has worked for me so far.

我想要谷歌地图 v3，如果你放大高于 15，地图会显示标记位置，但是当你缩小时，我想隐藏标记。我找不到任何功能来做到这一点。到目前为止，没有什么对我有用。

So this is my script:

所以这是我的脚本：

<script type="text/javascript">
        function initialize() {
            var mapOptions = {
              zoom: 15,
              center: new google.maps.LatLng(52.429236, 6.281255),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            setMarkers(map, points);

            google.maps.event.addListener(map, 'zoom_changed', function()
{
                        if (map.getZoom() > 15) {
                                setMarkers(map, points);
                        } else {
                                hideMarkers(map, points);

                        }
                           }); 

        }


        var points = [
            ['Location 1', 52.420891, 6.280204],
            ['Location 2', 52.420125, 6.279131],
            ['Location 3', 52.420125, 6.240125]
        ];


        function setMarkers(map, locations) {
            var image = new google.maps.MarkerImage('../images/map/beachflag.png',
            new google.maps.Size(20, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
            var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png',
            new google.maps.Size(37, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
            var shape = {
                coord: [1, 1, 1, 20, 18, 20, 18 , 1],
                type: 'poly'
            };

            for (var i = 0; i < locations.length; i++) {
                var point = locations[i];
                var myLatLng = new google.maps.LatLng(point[1], point[2]);
                var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                shadow: shadow,
                icon: image,
                shape: shape,
                title: point[0]
                });
            }
        }

        function hideMarkers(map, locations) {
            /* Remove All Markers */


            console.log("Remove All Markers");
        }
            </script>

Please can anybody help me whith this?

请问有人可以帮我吗？

回答by Anoop

I modified your code. I am keeping the reference of all markers in an array. and inside hideMarkers i am setting their map as null to remove them from map.

我修改了你的代码。我将所有标记的引用保留在一个数组中。在 hideMarkers 中，我将他们的地图设置为 null 以将它们从地图中删除。

 function initialize() {
        var mapOptions = {
            zoom : 15,
            center : new google.maps.LatLng(52.429236, 6.281255),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        var markers = setMarkers(map, access_points);

        google.maps.event.addListener(map, 'zoom_changed', function() {
            if (map.getZoom() > 15) {
                setMarkers(map, access_points);
            }
            else {
                hideMarkers(map, access_points, markers);

            }
        });

    }

    var access_points = [ [ 'Location 1', 52.420891, 6.280204 ], [ 'Location 2', 52.420125, 6.279131 ], [ 'Location 3', 52.420125, 6.240125 ] ];

    function setMarkers(map, locations) {
        var markers= [];
        var image = new google.maps.MarkerImage('../images/map/beachflag.png', new google.maps.Size(20, 32), new google.maps.Point(0, 0), new google.maps.Point(0,
                32));
        var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png', new google.maps.Size(37, 32), new google.maps.Point(0, 0),
                new google.maps.Point(0, 32));
        var shape = {
            coord : [ 1, 1, 1, 20, 18, 20, 18, 1 ],
            type : 'poly'
        };

        for ( var i = 0; i < locations.length; i++) {
            var access_point = locations[i];
            var myLatLng = new google.maps.LatLng(access_point[1], access_point[2]);
            var marker = new google.maps.Marker({
                position : myLatLng,
                map : map,
                shadow : shadow,
                icon : image,
                shape : shape,
                title : access_point[0],
                zIndex : access_point[3]
            }); 
            markers.push(marker);
        }
        return markers;
    }

    function hideMarkers(map, locations, markers) {
        /* Remove All Markers */
        while(markers.length){
            markers.pop().setMap(null);
        }

        console.log("Remove All Markers");
    }

回答by James Allardice

The easiest way is probably to modify your code slightly, so that your markers are contained in an array that's accessible to both the setMarkersand hideMarkersfunctions. You can then use the setMapmethod of the Markerclassto add/remove the marker from your map (pass nullto setMapto remove the marker from the map):

最简单的方法可能是稍微修改您的代码，以便您的标记包含在setMarkers和hideMarkers函数都可以访问的数组中。然后，您可以使用该类的setMap方法从地图中添加/删除标记（传递到以从地图中删除标记）：MarkernullsetMap

var markers = [];

function createMarkers(/* some args */) {
    // Create your markers, and add each one to the `markers` array
}

function setMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(yourMap); //Add the marker to the map
    }
}

function hideMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null); //Remove the marker from the map
    }
}

This approach also means that you don't recreate all your Markerinstances every time you want to show them.

这种方法还意味着您不必在Marker每次想要显示实例时都重新创建它们。