Google Maps API v3: How to remove all markers?
在Google Maps API v2中,如果我想删除所有地图标记,我可以简单地执行以下操作:
1 | map.clearOverlays(); |
如何在Google Maps API v3中执行此操作?
看看Reference API,我不清楚。
只需执行以下操作:
I.声明一个全局变量:
1 | var markersArray = []; |
II。定义一个函数:
1 2 3 4 5 6 | function clearOverlays() { for (var i = 0; i < markersArray.length; i++ ) { markersArray[i].setMap(null); } markersArray.length = 0; } |
要么
1 2 3 4 5 6 | google.maps.Map.prototype.clearOverlays = function() { for (var i = 0; i < markersArray.length; i++ ) { markersArray[i].setMap(null); } markersArray.length = 0; } |
III。在调用以下内容之前在'markerArray'中推送标记:
1 2 | markersArray.push(marker); google.maps.event.addListener(marker,"click",function(){}); |
IV。在需要的地方调用
而已!!
同样的问题。此代码不再起作用。
我已经纠正了它,用这种方式改变clearMarkers方法:
set_map(null)---> setMap(null)
1 2 3 4 5 6 | 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中还没有这样的功能。
人们建议在数组中保留对地图上所有标记的引用。然后当你想要删除em all时,只需循环遍历数组并在每个引用上调用.setMap(null)方法。
有关详细信息/代码,请参阅此问题。
我的版本:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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()始终在地图上找到所有标记。
缺点
- 像我现在一样使用原型和包装器使我的代码依赖于Google代码,如果他们在源代码中进行市长更改,这将会破坏。
- 如果你不理解它,那么如果它破坏了你将无法解决它。很有可能他们会改变任何会打破这个的东西,但仍然......
- 如果手动删除一个标记,它的引用仍将位于标记数组中。 (您可以编辑我的setMap方法来修复它,但代价是循环槽标记数组并删除引用)
这是YingYang于2014年3月11日15:049最初发布的最简单的解决方案,原始回复用户的原始问题
我在2.5年后使用谷歌地图v3.18使用同样的解决方案,它就像一个魅力
1 2 3 4 | markersArray.push(newMarker) ; while(markersArray.length) { markersArray.pop().setMap(null); } // No need to clear the array after that. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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上,他们建议保留在数组中。如下。
请参阅overlay-overview上的示例。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 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; } } |
1 2 3 | for (i in markersArray) { markersArray[i].setMap(null); } |
只在IE上工作。
1 2 3 | for (var i=0; i<markersArray.length; i++) { markersArray[i].setMap(null); } |
在chrome,firefox上工作,即......
解决方案非常简单。您可以使用以下方法:
因此,如果在此方法中设置
现在,您可以编写一个函数女巫,同时使您的地图中的所有标记消失。
您只需添加将引脚放入数组中并使用
1 2 3 4 5 6 7 8 | // 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); } |
这是一个可以在地图中设置或消除数组中所有标记的函数:
1 2 3 4 5 6 | // Sets the map on all markers in the array. function setMapOnAll(map) { for (var i = 0; i < markers.length; i++) { markers[i].setMap(map); } } |
要消除所有标记,您应该使用
1 2 3 4 | // Removes the markers from the map, but keeps them in the array. function clearMarkers() { setMapOnAll(null); } |
并且,为了移除和消失所有标记,您应该重置您的标记数组,如下所示:
1 2 3 4 5 | // Deletes all markers in the array by removing references to them. function deleteMarkers() { clearMarkers(); markers = []; } |
这是我的完整代码。这是我可以减少的最简单的。
请注意,您可以通过关键的Google API替换代码中的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!DOCTYPE html> <html> <head> Remove Markers <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> <p> Click on the map to add markers. </p> // 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 async defer src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap"> </body> </html> |
您可以咨询google开发人员或google开发人员网站上的完整文档。
谷歌的Demo Gallery有一个关于他们如何做到这一点的演示:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
您可以查看源代码以查看它们如何添加标记。
长话短说,他们将标记保存在全局数组中。清除/删除它们时,它们遍历数组并在给定的标记对象上调用".setMap(null)"。
但是,这个例子显示了一个"技巧"。此示例的"清除"意味着将它们从地图中删除但将它们保留在数组中,这允许应用程序快速将它们重新添加到地图中。从某种意义上说,这就像"隐藏"它们一样。
"删除"也会清除数组。
rolinger的答案清晰易用。
1 2 3 4 5 6 7 8 9 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) ; } |
两个答案中发布的"
我不知道发生了什么
更新:
谷歌似乎改变了他们的API,使"
http://code.google.com/apis/maps/documentation/v3/reference.html
在这里,您可以找到如何删除标记的示例:
https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | // 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 = []; } |
你也可以这样做:
1 2 3 4 5 6 7 | function clearMarkers(category){ var i; for (i = 0; i < markers.length; i++) { markers[i].setVisible(false); } } |
我发现在google-maps-utility-library-v3项目中使用markermanager库是最简单的方法。
1.设置MarkerManager
1 2 3 4 | mgr = new MarkerManager(map); google.maps.event.addListener(mgr, 'loaded', function () { loadMarkers(); }); |
2.将标记添加到MarkerManager
1 2 3 4 5 6 7 8 9 | function loadMarkers() { var marker = new google.maps.Marker({ title: title, position: latlng, icon: icon }); mgr.addMarker(marker); mgr.refresh(); } |
3.要清除标记,只需调用MarkerManger的
1 | mgr.clearMarkers(); |
以下来自Anon的工作非常完美,但在重复清除叠加层时会出现闪烁现象。
只需执行以下操作:
I.声明一个全局变量:
1 | var markersArray = []; |
II。定义一个函数:
1 2 3 4 5 6 7 | function clearOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } } } |
III。在调用以下内容之前在'markerArray'中推送标记:
1 2 | markersArray.push(marker); google.maps.event.addListener(marker,"click",function(){}); |
IV。在需要的地方调用
而已!!
希望能帮到你。
最干净的方法是迭代地图的所有功能。标记(以及多边形,折线等)存储在地图的数据层中。
1 2 3 4 5 | function removeAllMarkers() { map.data.forEach((feature) => { feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null }); } |
在通过绘图管理器添加标记的情况下,最好创建一个全局标记数组或在创建时将标记推入数据层,如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 | 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类方法。
我刚刚尝试使用kmlLayer.setMap(null)并且它工作正常。不确定这是否适用于常规标记,但似乎可以正常工作。
要清除所有叠加层,包括多边形,标记等...
只需使用:
这是我在地图应用程序中编写的一个函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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")); } |
要从地图中删除所有标记,请创建如下函数:
1.addMarker(location):此函数用于在地图上添加标记
2.clearMarkers():此函数从地图中删除所有标记,而不是从数组中删除
3.setMapOnAll(map):此函数用于在数组中添加标记信息
4.deleteMarkers():此函数通过删除对它们的引用来删除数组中的所有标记。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // 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 = []; } |
这是谷歌自己在至少一个样本中使用的方法:
1 2 3 4 5 6 7 | 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
我不知道为什么,但是,当我使用
在我的情况下,我不得不将
像这样的东西:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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); } }); |
只需遍历标记并从地图中删除它们,之后是空地图标记数组:
1 2 3 4 5 | var markers = map.markers; for(var i = 0; i < markers.length; i++) { markers[i].setMap(null); } map.markers = []; |
只需清除Googlemap
1 | mGoogle_map.clear(); |
我使用了一个能很好地完成工作的速记。做就是了
1 | map.clear(); |
我已经尝试了所有提议的解决方案,但是当我的所有标记都在群集下时,没有任何对我有用。
最后我只是说:
1 2 3 4 5 6 | 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(); |
换句话说,如果您在群集中包裹标记并想要删除所有标记,则可以调用:
1 | clearMarkers(); |
你的意思是删除,如隐藏或删除它们?
如果隐藏:
1 2 3 | function clearMarkers() { setAllMap(null); } |
如果你想删除它们:
1 2 3 4 | function deleteMarkers() { clearMarkers(); markers = []; } |
请注意,我使用数组标记来跟踪它们并手动重置它。
您需要将map null设置为该标记。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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); } |
我找到了简单的解决方案(我认为):
1 2 3 4 5 | var marker = new google.maps.Marker(); function Clear(){ marker.setMap(null); } |
如果你使用gmap V3插件:
请参阅:http://www.smashinglabs.pl/gmap/documentation#after-load
使用此功能,您可以从地图中删除所有标记。
1 | map.clear(); |
这会对你有所帮助,它对我帮助..
我知道这可能是一个简单的解决方案,但这就是我所做的
1 2 | $("#map_canvas").html(""); markers = []; |
每次都适合我。