Google Maps JavaScript API v3 删除标记

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10631206/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 10:30:53  来源:igfitidea点击:

Google Maps JavaScript API v3 remove markers

javascriptjquerygoogle-mapsgoogle-maps-api-3google-maps-markers

提问by Russell Parrott

I have looked at a large number of "similar" questions and none of the solutions/answers seem to work for me so here we go: I am generating a simple Google Map with a single marker "onload" I then have a menu list a bit like this

我查看了大量“类似”问题,但似乎没有一个解决方案/答案对我有用,所以我们开始吧:我正在生成一个带有单个标记“onload”的简单 Google 地图,然后我有一个菜单列表有点像这样

<ul>
<li class="toggle" id="beaches">Item</li>
<li class="toggle" id="towns">Item</li>
<ul>

that on click uses these arrays to marker-populate the map

单击时使用这些数组来标记填充地图

jQuery -

jQuery -

$(".toggle").click(function(){
setMarkers(map,$(this).attr('id'));
});

var beaches = [
['Beach 1',38.285827, 20.611038, 4],
['Beach 2', 38.304958,20.604515, 5],
['Beach 3',38.301691,20.597649, 3]
];

var towns = [
['Town 1',38.343003, 20.535679, 4],
['Town 2',38.339334,20.545807, 5]
];

My population function looks like this:

我的人口函数如下所示:

function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var newmarker = locations[i];
var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: newmarker[0],
zIndex: newmarker[3]
});
}

But what I need/want to do is clear allmarkers first before adding the new ones. Suggestions please Thanks

但是我需要/想要做的是在添加新标记之前先清除所有标记。请给点建议谢谢

回答by Engineer

You need to store markers, and call setMap(null)for every marker to remove from map.

您需要存储标记,并要求setMap(null)从地图中删除每个标记。

You could try something like this:

你可以尝试这样的事情:

var setMarkers = (function() {
    var oldMarkers = null;
    return function(map, locations){
        //Clearing markers, if they exist
        if(oldMarkers && oldMarkers.length !== 0){
            for(var i = 0; i < oldMarkers.length; ++i){
                oldMarkers[i].setMap(null);
            }
        }
        //Adding new markers
        oldMarkers = [];
        for (var i = 0; i < locations.length; i++) {
            var newmarker = locations[i];
            var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);
            var marker = new google.maps.Marker({
               position: myLatLng,
               map: map,
               title: newmarker[0],
               zIndex: newmarker[3]
            });
            oldMarkers.push( marker );
        }
   };
})();

回答by lfergon

Maybe you could use one function that empty array that contains markers:

也许您可以使用一个包含标记的空数组的函数:

function clear(){
   if(locations){
        for(var i=0;i<location.length;i++){
            locations[i].setMap(null);
        }
        locations.length=0;
    }
}

回答by Shaun Hare

You need to make sure your markers are stored in a array and then to remove do some thing like

您需要确保您的标记存储在一个数组中,然后删除做一些像

// Sets the map on all markers in the array.
      function removeMarkers {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
        }
        markers.length=0;

      }

So your code would now be

所以你的代码现在是

var markers [];

function setMarkers(map, locations) {
// remove all markers first 
removeMarkers();
for (var i = 0; i < locations.length; i++) {
var newmarker = locations[i];

var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: newmarker[0],
zIndex: newmarker[3]
});
//add to marker array 
markers.push(marker);
} 

回答by Alex

You could define a global array of markers and clearing those by calling setMap(null)before you re-populate the map:

您可以定义一个全局标记数组,并setMap(null)在重新填充地图之前通过调用清除它们:

var markers = [];

function setMarkers(map, locations) {
    for (var i = 0; i < locations.length; i++) {
        var newmarker = locations[i];
        var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);

        if (markers[i]) {
            markers[i].setMap(null);
        }

        markers[i] = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: newmarker[0],
            zIndex: newmarker[3]
        });
    }
}