Wenn ich in Google Maps API v2 alle Kartenmarkierungen entfernen wollte, könnte ich einfach Folgendes tun:
map.clearOverlays();
Wie mache ich das in der Google Maps API v3?
Wenn man sich die Reference API ansieht, ist mir das nicht klar.
Machen Sie einfach folgendes:
I. Deklarieren Sie eine globale Variable:
var markersArray = [];
II. Eine Funktion definieren:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
OR
google.maps.Map.prototype.clearOverlays = function() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
III. Drücken Sie Markierungen im 'markerArray', bevor Sie Folgendes aufrufen:
markersArray.Push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Rufen Sie bei Bedarf die Funktion clearOverlays();
oder map.clearOverlays();
auf.
Das ist es!!
Gleiches Problem. Dieser Code funktioniert nicht mehr.
Ich habe es korrigiert und die clearMarkers-Methode folgendermaßen geändert:
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();
};
Die Dokumentation wurde aktualisiert und enthält Details zum Thema: https://developers.google.com/maps/documentation/javascript/markers#remove
Es scheint, dass es in V3 noch keine solche Funktion gibt.
Die Leute schlagen vor, Verweise auf alle Marker auf der Karte in einem Array zu behalten. Wenn Sie dann alle löschen möchten, durchlaufen Sie einfach das Array und rufen die .setMap (null) -Methode für jede der Referenzen auf.
Siehe diese Frage für weitere Informationen/Code.
Meine Version:
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);
}
Der Code ist eine bearbeitete Version dieses Codes http://www.lootogo.com/googlemapsapi3/markerPlugin.html Ich habe die Notwendigkeit entfernt, addMarker manuell aufzurufen.
Pros
Cons
Dies war die einfachste aller Lösungen, die ursprünglich von YingYang 11. März 14 um 15: 049 unter der ursprünglichen Antwort auf die ursprüngliche Frage des Benutzers veröffentlicht wurden
Ich benutze seine Lösung 2,5 Jahre später mit Google Maps v3.18 und es funktioniert wie ein Zauber
markersArray.Push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }
// No need to clear the array after that.
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();
};
Ich glaube nicht, dass es eine in V3 gibt, also habe ich die obige benutzerdefinierte Implementierung verwendet.
Haftungsausschluss: Ich habe diesen Code nicht geschrieben, aber ich habe vergessen, einen Verweis beizubehalten, als ich ihn in meine Codebase einfügte.
In der neuen Version v3 wurde empfohlen, Arrays beizubehalten. wie folgt.
Siehe Muster unter Overlay-Übersicht .
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;
}
}
for (i in markersArray) {
markersArray[i].setMap(null);
}
arbeitet nur an IE.
for (var i=0; i<markersArray.length; i++) {
markersArray[i].setMap(null);
}
arbeiten an Chrom, Firefox, dh ...
Die Lösung ist ziemlich einfach. Sie können die Methode verwenden: marker.setMap(map);
. Hier legen Sie fest, auf welcher Karte die Pin erscheinen soll.
Wenn Sie also null
in dieser Methode (marker.setMap(null);
) setzen, verschwindet der Pin.
Jetzt können Sie eine Funktion schreiben, mit der alle Markierungen in Ihrer Karte verschwinden.
Fügen Sie einfach Ihre Pins in ein Array ein und deklarieren Sie sie mit markers.Push (your_new pin)
oder diesem Code, zum Beispiel:
// 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);
}
Dies ist eine Funktion, mit der alle Marker Ihres Arrays in der Karte gesetzt oder ausgeblendet werden können:
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
Um alle Markierungen auszublenden, sollten Sie die Funktion mit null
aufrufen:
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
Um alle Markierungen zu entfernen und zu entfernen, sollten Sie Ihr Array von Markierungen wie folgt zurücksetzen:
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
Dies ist mein vollständiger Code. Es ist das Einfachste, auf das ich reduzieren könnte. Seien Sie vorsichtig Sie können YOUR_API_KEY
im Code durch Ihre Google-Schlüssel-API ersetzen:
<!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>
Sie können google developer oder die vollständige Dokumentation auch auf google developer web site konsultieren.
Die Demo-Galerie von Google enthält eine Demo, wie sie das machen:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
Sie können den Quellcode anzeigen, um zu sehen, wie sie Markierungen hinzufügen.
Um es kurz zu machen, sie halten die Marker in einem globalen Array. Beim Löschen/Löschen durchlaufen sie das Array und rufen ".setMap (null)" für das angegebene Markierungsobjekt auf.
Dieses Beispiel zeigt jedoch einen "Trick". "Klar" bedeutet in diesem Beispiel, sie aus der Karte zu entfernen, sie jedoch im Array zu behalten, sodass die Anwendung sie schnell wieder zur Karte hinzufügen kann. In gewissem Sinne wirkt das wie ein "Verstecken".
"Löschen" löscht auch das Array.
Eine saubere und einfache Anwendung von Rolingers Antwort.
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) ;
}
Die in beiden Antworten veröffentlichte Funktion "set_map
" scheint in der Google Maps v3-API nicht mehr zu funktionieren.
Ich frage mich, was passiert ist
Update:
Es hat den Anschein, dass Google ihre API so geändert hat, dass "set_map
" nicht "setMap
" ist.
http://code.google.com/apis/maps/documentation/v3/reference.html
Hier finden Sie ein Beispiel zum Entfernen von Markern:
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 = [];
}
Die Verwendung der markermanager-Bibliothek im Projekt google-maps-utility-library-v3 war der einfachste Weg.
1. Richten Sie den MarkerManager ein
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
loadMarkers();
});
2. Marker zum MarkerManager hinzufügen
function loadMarkers() {
var marker = new google.maps.Marker({
title: title,
position: latlng,
icon: icon
});
mgr.addMarker(marker);
mgr.refresh();
}
3. Um Marker zu löschen, müssen Sie nur die clearMarkers()
-Funktion von MarkerManger aufrufen
mgr.clearMarkers();
Das Folgende von Anon funktioniert einwandfrei, allerdings mit Flimmern beim wiederholten Löschen der Überlagerungen.
Machen Sie einfach folgendes:
I. Deklariere eine globale Variable:
var markersArray = [];
II. Funktion definieren:
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
III. Drücken Sie Markierungen im 'markerArray', bevor Sie Folgendes aufrufen:
markersArray.Push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Rufen Sie bei Bedarf die Funktion clearOverlays()
auf.
Das ist es!!
Hoffe das wird dir helfen.
Ich habe es gerade mit kmlLayer.setMap (null) ausprobiert und es hat funktioniert. Nicht sicher, ob dies mit normalen Markern funktionieren würde, aber richtig zu funktionieren scheint.
Entfernen Sie alle Überlagerungen, einschließlich Polys, Markierungen usw.
benutze einfach:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
Hier ist eine Funktion, die ich für eine Kartenanwendung geschrieben habe:
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"));
}
Um alle Markierungen aus der Map zu entfernen, erstellen Sie Funktionen wie folgt:
1.addMarker (location): Diese Funktion dient zum Hinzufügen von Markierungen auf der Karte
2.clearMarkers (): Diese Funktion entfernt alle Marker aus der Map, nicht aus dem Array
3.setMapOnAll (map): Diese Funktion dient zum Hinzufügen von Markierungsinformationen im Array
4.deleteMarkers (): Diese Funktion löscht alle Markierungen im Array, indem Verweise auf sie entfernt werden.
// 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 = [];
}
Der sauberste Weg, dies zu tun, besteht darin, alle Funktionen der Karte zu durchlaufen. Marker (zusammen mit Polygonen, Polylinien usw.) werden in der Datenschicht der Karte gespeichert.
function removeAllMarkers() {
map.data.forEach((feature) => {
feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
});
}
Wenn die Marken über Drawing Manager hinzugefügt werden, ist es am besten, ein globales Array von Marken zu erstellen oder die Marken bei der Erstellung wie folgt in die Datenebene zu verschieben:
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);
}
});
Ich empfehle den zweiten Ansatz, da Sie später andere Klassenmethoden der Klasse google.maps.data verwenden können.
Sie können es auch so machen:
function clearMarkers(category){
var i;
for (i = 0; i < markers.length; i++) {
markers[i].setVisible(false);
}
}
Dies ist die Methode, die Google selbst in mindestens einem Beispiel verwendet:
var markers = [];
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
Überprüfen Sie das Google-Beispiel auf ein vollständiges Codebeispiel:
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
Ich weiß nicht warum, aber das Setzen von setMap(null)
auf meine Markierungen hat für mich nicht funktioniert, wenn ich DirectionsRenderer
verwende.
In meinem Fall musste ich setMap(null)
auch zu meiner DirectionsRenderer
aufrufen.
Sowas in der Art:
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);
}
});
Ich habe alle vorgeschlagenen Lösungen ausprobiert, aber nichts hat für mich funktioniert, während alle meine Markierungen unter einem Cluster waren.
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();
Mit anderen Worten, wenn Sie Markierungen in einen Cluster einschließen und alle Markierungen entfernen möchten, rufen Sie Folgendes auf:
clearMarkers();
Ich benutze eine Abkürzung, die die Arbeit gut macht. Mach einfach
map.clear();
einfach Googlemap löschen
mGoogle_map.clear();
Gehen Sie einfach über die Markierungen und entfernen Sie sie von der Karte.
var markers = map.markers;
for(var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
map.markers = [];