Google Maps API v3：如何删除所有标记？

在Google Maps API v2中，如果要删除所有地图标记，我可以简单地执行以下操作：

map.clearOverlays();

如何在Google Maps API v3中执行此操作？

看参考API，我不清楚。

我在下面的链接中找到了一些代码，但是，圣牛-是很多代码来模拟API v2中的前1行代码。 lootogo.com/googlemapsapi3/markerPlugin.html

请记住，maps 3.0的含义非常轻，以便移动设备尽可能少地使用它。

从2010/07/29开始，此处建议的解决方案似乎已被破坏。我希望有一个工作版本可以建议。

评分最高的答案是错误的。查看此示例的源代码以了解操作方法：google-developers.appspot.com/maps/documentation/javascript/…

请查看此页面gmaps-utility-library.googlecode.com/svn/trunk/markermanager / ...

#1 楼

只需执行以下操作：

I.声明一个全局变量：

var markersArray = [];

II。定义函数：

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III。在调用以下代码之前，先将标记放入'markerArray'中：

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV。只需在需要的地方调用clearOverlays();或map.clearOverlays();函数即可。

就这样！

for..in与数组循环？这肯定不能好..？ ..请参阅：stackoverflow.com/questions/500504/…

–zack
2011年4月14日19:55

或者，您可以使用marker.setVisible（false）隐藏标记

–NBK
2012年8月24日在7:19

尽管标记仍保留在数组中，所以它将越来越大。建议在循环后也清除数组

–阿米
2012年10月5日，9：08

您总是可以将markersArray设置为一个空数组，而不是设置其长度，我觉得这很奇怪：markersArray = [];

–希拉坦
13年11月28日在21:28

我会用while方法处理数组：while（markersArray.length）{markersArray.pop（）。setMap（null）; }。之后，无需清除数组。

–英阳
2014年3月11日15:04

#2 楼

同样的问题。此代码不再起作用。

我已纠正它，以这种方式更改clearMarkers方法：

set_map（null）---> setMap（null）

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

文档已更新，包括有关以下主题的详细信息：https://developers.google.com/maps/documentation/javascript/markers#remove

我最终使它工作的方法是遍历存储它们的markers集合并使用setMap（null）

–塞巴斯蒂安
2010-4-13的2:45

但这是否清除了内存中的标记？我意识到JavaScript具有自动垃圾回收功能，但是当调用setMap（null）时，我们怎么知道Google的API没有保存对标记的引用？在我的应用程序中，我添加并“删除”了很多标记，而我讨厌所有那些“已删除”的标记消耗内存。

–尼克
2010年7月23日下午4:11

@Nick：添加“删除this.markers [i];”在setMap（null）位之后。

–戴夫
2011年1月7日在21:13

现在，文档中已经回答了这个问题。 code.google.com/apis/maps/documentation/javascript/…

– lashleigh
2011年1月20日19:43

谁甚至使用new Array（）; ？

– Rihards
2012年11月22日在8:39

#3 楼

似乎V3中还没有这样的功能。

人们建议将对地图上所有标记的引用保留在数组中。然后，当您要全部删除它们时，只需遍历数组并在每个引用上调用.setMap（null）方法。

有关更多信息/代码，请参阅此问题。

我的版本：

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;

google.maps.Marker.prototype.setMap = function(map) {
    if (map) {
        map.markers[map.markers.length] = this;
    }
    this._setMap(map);
}

该代码是此代码的编辑版本http://www.lootogo.com/googlemapsapi3/markerPlugin.html我删除了需要手动调用addMarker。

Pros

这样做可以将代码保持在一个紧凑的位置（不会污染名称空间）。
您不必再自己跟踪标记，您随时可以通过调用map.getMarkers（）

缺点

现在像我一样使用原型和包装器，使我的代码依赖于Google代码，如果他们在源代码中进行市长更改，则将中断。
如果您不了解，则将无法使用如果确实发生故障，请修复它。他们将更改任何会破坏它的东西的可能性很小，但是仍然..
如果手动删除一个标记，则它的引用仍将位于标记数组中。（您可以编辑我的setMap方法来修复它，但是要以循环槽标记数组和删除引用为代价）

从我+1。但是，如果您包含包装器来自动调用addMarker，您的答案会更好！

–安德鲁（Andrew）
09年10月9日在17:07

我认为您实际上是指安德鲁斯的答案。您会用代码显示您将做些什么以及为什么做。谢谢

–mp_
09年10月9日17:10

抱歉，延迟，我无法发布代码，因为我无法快速对其进行测试。

–森ai
09年10月9日17:43

谢谢Maiku。不过，我不明白-如何在您的示例中添加新标记。再次非常感谢！

–mp_
09年10月9日17:50

我尝试使用setMap（null），但是我有一个自动更新的脚本，每当我将全部约50个标记设置为空地图时，我仍然在DOM中的某个地方漂浮着一堆无地图标记。这一直导致页面崩溃，因为它每30秒向DOM添加50个新标记，并且由于页面在视频墙上始终保持24/7的开放状态而不断传播。在创建新的图层之前，我不得不使用顶部的答案并从DOM中完全清除所有地图图层。希望这对某人有帮助；我花了很长时间才弄清楚为什么我的页面崩溃了！ :(

–InterfaceGuy
2012年7月25日在22:02

#4 楼

这是YingYang 2014年3月11日15：049最初发布的所有解决方案中最简单的解决方案，最初是针对用户的原始问题。

2.5年后，我在Google Maps上使用了他的相同解决方案v3.18，它像魅惑符一样工作

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.

#5 楼

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

我认为V3中没有这个，所以我使用了上面的自定义实现。

免责声明：我没有编写此代码，但我忘记保留引用了当我将其合并到我的代码库中时，我不知道它来自哪里。

从我+1。我会在google.maps.Marker构造函数（或setMap方法，因为我认为构造函数在内部调用它）周围添加一个包装器，该函数会自动调用addMarker，但仍然是一个不错的答案:)。

–森ai
2009年10月9日在16:56

@Maiku Mari，您会用代码显示您将做些什么以及为什么做。谢谢

–mp_
09年10月9日在17:07

这不是解决方案吗？您可以通过在要清除的特定标记上使用set_map（null）来删除标记，如果要清除所有标记，则可以使用此功能循环浏览。如果您还需要其他信息，请在此处：code.google.com/p/gmaps-api-issues/issues/…

–佩特罗加德
09年10月9日17:50

我相信它来自此处lootogo.com/googlemapsapi3/markerPlugin.html

–森ai
09年10月9日在18:22

-1风格不好。仅创建了一个标记数组，但clearMapers之后每个地图一个（由原型的获取/设置差异引起）。带有多个地图对象的令人讨厌的错误。

– Tomas
2010年5月6日14:41

#6 楼

在新版本v3上，他们建议保留在数组中。如下。

请参见叠加概述中的示例。

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

#7 楼

Google的演示库提供了有关其操作方法的演示：

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

您可以查看源代码以查看它们如何添加标记。

长话短说，它们将标记保留在全局数组中。清除/删除它们时，它们遍历数组并在给定的标记对象上调用“ .setMap（null）”。

但是，此示例显示了一个“技巧”。在此示例中，“清除”意味着将它们从地图中删除，但将其保留在数组中，这使应用程序可以快速将它们重新添加到地图中。从某种意义上讲，这就像“隐藏”它们。

“删除”也会清除数组。

#8 楼

for (i in markersArray) {
  markersArray[i].setMap(null);
}

仅可用于IE。

for (var i=0; i<markersArray.length; i++) {
  markersArray[i].setMap(null);
}

可用于chrome，firefox，即...

请阅读有关SO上代码格式的帮助

– Freefaller
2012年12月3日，9：41

#9 楼

解决方案很容易。您可以使用以下方法：marker.setMap(map);。在这里，您可以定义图钉将出现在哪个地图上。

因此，如果在此方法中设置null（marker.setMap(null);），则该引脚将消失。

现在，您可以编写一个函数，使make全部消失。您只需在地图中添加标记即可。

您只需添加即可将引脚放置在数组中，并使用markers.push (your_new pin)或以下代码进行声明，例如：

// Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

这是一个可以在地图中设置或消失数组所有标记的函数：

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

要消失所有标记，应使用null调用该函数：

// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

而且，要删除所有的标记，这些标记都应删除并消失，您应该像这样重置标记数组：

// Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

这是我的完整代码。这是我可以简化为的最简单的方法。
请当心，您可以用关键的Google API替换代码中的YOUR_API_KEY：

<!DOCTYPE html>
<html>
  <head>
  <title>Remove Markers</title>
  <style>
     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }
  </style>
</head>
<body>

<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 37.769, lng: -122.446};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
  }

   // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
  }

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

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

</script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
   </script>
</body>
</html>

您可以咨询Google开发人员或完整的文档也在Google Developer网站上。

#10 楼

干净，容易使用罗林格答案。

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.push(marker) ;
    }

#11 楼

在两个答案中张贴的“ set_map”功能似乎在Google Maps v3 API中不再起作用。

我想知道发生了什么

更新：

看来Google更改了其API，以使“ set_map”不是“ setMap”。

http://code.google.com/apis/maps/documentation/v3/reference.html

#12 楼

在这里，您可以找到有关如何删除标记的示例：

https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es

// Add a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

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

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}

#13 楼

来自Anon的以下内容效果很好，尽管在反复清除覆盖层时会闪烁。

只需执行以下操作：

I.声明一个全局变量：

var markersArray = [];

II。定义功能：

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

III。在调用以下代码之前，先将标记放入'markerArray'中：

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV。只需在需要的地方调用clearOverlays()函数即可。

就这样！

希望对您有所帮助。

for（在markersArray中）{}可能未达到您的期望。如果将Array扩展到代码中的其他位置，它还将遍历这些属性，而不仅仅是索引。 javascript版本是markersArray.forEach（），并非所有地方都支持。你最好使用for（var i = 0; i
– Kit Sunde
2012年9月15日15:39

#14 楼

我发现在google-maps-utility-library-v3项目中使用markermanager库是最简单的方法。

1。设置MarkerManager

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

2。将标记添加到MarkerManager

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

3。要清除标记，您只需调用MarkerManger的clearMarkers()函数

mgr.clearMarkers();

将该库用于清除标记似乎有些过大。 clearMarkers所做的所有工作都是遍历调用marker.setMap（null）的标记（我检查了源代码）。将它们放在一个数组中然后自己做会减少工作。

– Kit Sunde
2012-09-15 15:33

#15 楼

您也可以这样操作：

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                          
    markers[i].setVisible(false);        
  }    
}

#16 楼

我刚刚使用kmlLayer.setMap（null）进行了尝试，并且它起作用了。不知道这是否可以与常规标记一起使用，但似乎可以正常使用。

#17 楼

要清除所有覆盖，包括多边形，标记等...

只需使用：

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

这是我写的一个函数在地图应用程序上将其形成表格：

  function clear_Map() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: HamptonRoads
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

这还会重置地图吗？假设用户是否已将地图拖动到新区域？

–奇丘
13-10-19在17:17

#18 楼

要从地图上删除所有标记，请创建类似以下内容的函数：

1.addMarker（位置）：此函数用于在地图上添加标记

2.clearMarkers（）：此函数从地图上删除所有标记，而不是从数组中删除所有标记

3.setMapOnAll（map）：此函数用于在数组中添加标记信息

4.deleteMarkers（）：此函数通过删除对标记的引用来删除数组中的所有标记。

// Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }


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



// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

// Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }

#19 楼

最干净的方法是遍历地图的所有功能。标记（以及多边形，折线等）存储在地图的数据层中。

function removeAllMarkers() {
  map.data.forEach((feature) => {
    feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
  });
}

通过图形管理器添加标记时，最好创建一个全局标记数组，或在创建时将标记推入数据层，如下所示：

google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
    var newShape = e.overlay;
    newShape.type = e.type;

    if (newShape.type === 'marker') {
      var pos = newShape.getPosition()
      map.data.add({ geometry: new google.maps.Data.Point(pos) });

      // remove from drawing layer
      newShape.setMap(null);
    }
  });

我建议第二种方法，因为它允许您稍后再使用其他google.maps.data类方法。

#20 楼

这是Google自己在至少一个示例中使用的方法：

var markers = [];

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

检查Google示例以获取完整的代码示例：

https：// developers.google.com/maps/documentation/javascript/examples/places-searchbox

#21 楼

我不知道为什么，但是，当我使用setMap(null)时，将DirectionsRenderer设置为标记对我不起作用。

在我的情况下，我也必须给setMap(null)调用DirectionsRenderer。 />
类似的东西：

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

if (map.directionsDisplay) {
    map.directionsDisplay.setMap(null);
}

map.directionsDisplay = directionsDisplay;

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};

directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

#22 楼

只需走过标记并将其从地图中删除，然后清空地图标记数组即可：

var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}
map.markers = [];

#23 楼

只需清除Googlemap

mGoogle_map.clear();

#24 楼

我已经尝试了所有建议的解决方案，但是当我所有的标记都在群集中时，对我没有任何帮助。
最终我只说了这个：

var markerCluster = new MarkerClusterer(map, markers,
    { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;

//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();

换句话说，如果您将标记包装在一个群集中并想删除所有标记，请致电：

clearMarkers();

#25 楼

投票最多的答案是正确的，但是如果您一次只拥有一个标记（例如我当时的情况），并且每次您需要杀死该标记的先前位置并添加一个新标记，那么您就不会需要创建整个标记数组并在每次按下和弹出时对其进行管理，您只需创建一个变量来存储标记的先前位置，并在创建新标记时将其设置为null。
//全局变量保留标记位置。
var previousMarker;
//同时添加新标记

    if(previousMarker != null)
previousMarker.setMap(null);

var marker = new google.maps.Marker({map: resultsMap, position: new google.maps.LatLng(lat_, lang_)});
previousMarker = marker;

#26 楼

您是说要像隐藏它们一样删除它们还是删除它们？

是否隐藏：

function clearMarkers() {
            setAllMap(null);
        }

如果要删除它们：

 function deleteMarkers() {
            clearMarkers();
            markers = [];
        }

请注意，我使用数组标记来跟踪它们并手动将其重置。

#27 楼

您需要将地图null设置为该标记。

var markersList = [];    

function removeMarkers(markersList) {
   for(var i = 0; i < markersList.length; i++) {
      markersList[i].setMap(null);
   }
}

function addMarkers() {
   var marker = new google.maps.Marker({
        position : {
            lat : 12.374,
            lng : -11.55
        },
        map : map
       });
      markersList.push(marker);
   }

#28 楼

我找到了简单的解决方案（我认为）：

var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}

#29 楼

我用速记做得很好。只要做

    map.clear();

#30 楼

如果您使用gmap V3插件：
$("#map").gmap("removeAllMarkers");

请参阅：http://www.smashinglabs.pl/gmap/documentation#after-load

编程黑洞网