在Google Maps API v2中,如果我想删除所有地图标记,则可以执行以下操作:
map.clearOverlays();
如何在Google Maps API v3中执行此操作?
看参考API,我不清楚。
在Google Maps API v2中,如果我想删除所有地图标记,则可以执行以下操作:
map.clearOverlays();
如何在Google Maps API v3中执行此操作?
看参考API,我不清楚。
Answers:
只需执行以下操作:
一,声明一个全局变量:
var markersArray = [];
二。定义一个函数:
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;
}
三,在调用以下代码之前,将标记推入“ markerArray”中:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV。在需要时调用clearOverlays();
或map.clearOverlays();
函数。
而已!!
markersArray
为空数组而不是设置其长度,我觉得有点奇怪:markersArray = [];
while
方法来处理数组:while(markersArray.length) { markersArray.pop().setMap(null); }
。之后,无需清除数组。
同样的问题。此代码不再起作用。
我已经更正了,以这种方式更改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
new Array();
?
在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了。
优点
缺点
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上的示例。
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;
}
}
Google的演示库演示了如何进行演示:
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);
}
在chrome,firefox上工作,即...
解决方案非常简单。您可以使用方法:marker.setMap(map);
。在这里,您可以定义图钉将出现在哪个地图上。
因此,如果您null
使用此方法(marker.setMap(null);
)进行设置,则该图钉将消失。
现在,您可以在使地图中的所有标记消失的同时编写一个函数witch。
您只需添加即可将引脚放置在数组中,并使用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 = [];
}
这是我完整的代码。这是我可以简化为的最简单的方法。
请注意,您可以用YOUR_API_KEY
关键的Google API 替换代码:
<!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 developer网站上查询google developer或完整的文档。
set_map
在两个答案中张贴的“ ”功能似乎在Google Maps v3 API中不再起作用。
我不知道发生了什么
更新:
Google似乎更改了其API,以使“ set_map
”不是“ setMap
”。
http://code.google.com/apis/maps/documentation/v3/reference.html
在这里,您可以找到有关如何删除标记的示例:
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 = [];
}
来自Anon的以下内容效果很好,尽管在反复清除覆盖层时会闪烁。
只需执行以下操作:
一,声明一个全局变量:
var markersArray = [];
二。定义一个函数:
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
三,在调用以下代码之前,将标记推入“ markerArray”中:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV。clearOverlays()
在需要时调用该函数。
而已!!
希望对您有所帮助。
for(in in markersArray){}
可能没有按照您的预期去做。如果Array
扩展了代码中的其他任何位置,它还将遍历这些属性,而不仅仅是索引。markersArray.forEach()
并非所有地方都支持javascript版本。您会更好for(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
我发现在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)
(我检查了源)。将它们放在一个数组中然后自己做会减少工作。
清除所有叠加层,包括多边形,标记等。
只需使用:
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"));
}
要从地图中删除所有标记,请创建类似以下内容的函数:
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 = [];
}
最干净的方法是迭代地图的所有功能。标记(以及多边形,折线等)存储在地图的数据层中。
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类方法。
这是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
我不知道为什么,但是,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);
}
});
只是清除Googlemap
mGoogle_map.clear();
我已经尝试了所有建议的解决方案,但是当我所有的标记都在群集中时,对我没有任何帮助。最终我只是这样:
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();
您需要将地图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);
}
我用速记做得很好。做就是了
map.clear();
如果您使用gmap V3插件:
$("#map").gmap("removeAllMarkers");
请参阅:http : //www.smashinglabs.pl/gmap/documentation#after-load
我知道这可能是一个简单的解决方案,但这就是我要做的
$("#map_canvas").html("");
markers = [];
每次都为我工作。