Google Maps API v3:如何删除所有标记?

在Google Maps API v2中,如果我想删除所有地图标记,则可以简单地执行以下操作:

map.clearOverlays(); 

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

查看Reference API ,我不清楚。

只需执行以下操作:

I.声明一个全局variables:

 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(); function在任何地方。

而已!!

同样的问题。 此代码不再有效。

我已经纠正它,改变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

在V3中似乎还没有这样的function呢。

人们build议在数组中保留对地图上所有标记的引用。 然后,当你想删除em全部时,只需循环数组,并在每个引用上调用.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。;

优点

  • 这样做可以使代码紧凑并且在一个地方(不污染名字空间)。
  • 您不必随时跟踪标记,您可以通过调用map.getMarkers()来始终查找地图上的所有标记。

缺点

  • 像我现在使用原型和包装,现在使我的代码依赖于谷歌代码,如果他们的源代码的市长改变这将打破。
  • 如果你不明白,那么如果破坏,你将无法修复它。 机会很低,他们将改变任何将打破这一点,但仍然..
  • 如果你手动删除一个标记,它的引用仍然在标记数组中。 (你可以编辑我的setMap方法来修复它,但是以循环槽标记数组和删除引用为代价)
 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中有一个,所以我使用上述自定义实现。

免责声明:我没有写这个代码,但是当我把它合并到我的代码库时我忘了保留一个引用,所以我不知道它来自哪里。

在新版本v3上,他们build议保持arrays。 如下所示。

请参阅重叠概述中的示例。

 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; } } 

这是YingYang最初发表于2014年3月11日15:049原来对用户原始问题的回应

2.5年后,我使用他的同样的解决scheme与谷歌地图V3.18,它的作品就像一个魅力

 markersArray.push(newMarker) ; while(markersArray.length) { markersArray.pop().setMap(null); } // No need to clear the array after that. 

Google的Demo Gallery有一个演示如何进行的演示:

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

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

长话短说,他们把标记放在一个全局数组中。 清除/删除它们时,循环访问数组,并在给定的标记对象上调用“.setMap(null)”。

但是,这个例子显示了一个“窍门”。 这个例子中的“清除”意味着从地图中删除它们,但将它们保留在数组中,这允许应用程序快速将它们重新添加到地图中。 从某种意义上说,这就像“隐藏”它们一样。

“删除”也会清除数组。

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

只在IE上工作。


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

在铬,火狐工作,即…

这两个答案中发布的“ set_map ”函数在Google Maps v3 API中似乎不再有效。

我不知道发生了什么

更新:

Google改变了他们的API,使得“ set_map ”不是“ setMap ”。

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

罗林格答案的清洁和简单的应用。

 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) ; } 

以下来自Anon的作品完美无缺,但在重复清除叠加层时会闪烁。

只需执行以下操作:

I.声明一个全局variables:

 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()函数。

而已!!

希望能帮到你。

我发现在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(); 

在这里你可以find一个如何删除标记的例子:

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 = []; } 

我刚刚试过这与kmlLayer.setMap(空),它的工作。 不知道这是否会正常的标记,但似乎正常工作。

要清除包括多边形,标记等在内的所有叠加层

只需使用:

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")); } 

你也可以这样做:

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

解决scheme非常简单。 你可以使用这个方法: marker.setMap(map); 。 在这里,您可以定义在哪个地图上显示引脚。

所以,如果你在这个方法中设置nullmarker.setMap(null); ),这个pin就会消失。


现在,您可以编写一个函数,同时使地图中的所有标记消失!

你只需要把你的引脚放在一个数组中,并用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 APIreplace代码中的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> 

您可以在谷歌开发人员或在这里, 谷歌开发人员网站的完整文档axampleample。

只要清除Googlemap

 mGoogle_map.clear(); 

从地图中删除所有的标记创buildfunction如下所示:

1.addMarker(位置):此function用于在地图上添加标记

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 = []; } 

我不知道为什么,但是,当我使用DirectionsRenderer时,将setMap(null)设置为我的标记不适用于我。

在我的情况下,我不得不调用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); } }); 

这是Google自己至less在一个样本中使用的方法:

 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

只要走过标记,并从地图中删除它们,之后的空映射标记数组:

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

你的意思是删除,因为在隐藏或删除它们?

如果隐藏:

 function clearMarkers() { setAllMap(null); } 

如果你想删除它们:

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

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

您需要将map 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); } 

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

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

我知道这可能是一个简单的解决scheme,但这就是我所做的

 $("#map_canvas").html(""); markers = []; 

每次为我工作。

使用这个,你可以从地图上删除所有的标记。

 map.clear(); 

这会帮助你,它帮助我..