wake-up-neo.com

Google Maps API v3: Wie werden alle Markierungen entfernt?

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.

javascripthtmlgoogle-mapsgoogle-maps-api-3
413
mp_

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!!

470
anon

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

83
Pons

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

  • Auf diese Weise halten Sie den Code kompakt und an einem Ort (verschmutzt den Namespace nicht).
  • Sie müssen die Markierungen nicht mehr selbst nachverfolgen, Sie können immer alle Markierungen auf der Karte finden, indem Sie map.getMarkers () aufrufen.

Cons

  • Durch die Verwendung von Prototypen und Wrappern, wie ich sie jetzt gemacht habe, ist mein Code von Google-Code abhängig. Wenn sie eine Änderung des Quellcodes in ihrem Quellcode vornehmen, wird dies brechen.
  • Wenn Sie es nicht verstehen, können Sie es nicht reparieren, wenn es kaputt geht. Die Chancen sind gering, dass sie irgendetwas ändern werden, was dies bricht, aber trotzdem ..
  • Wenn Sie eine Marke manuell entfernen, befindet sich ihre Referenz weiterhin im Marker-Array. (Sie können meine setMap-Methode bearbeiten, um sie zu beheben, jedoch auf Kosten des Durchschleifens des Marker-Arrays und Entfernen der Referenz.) 
46
Maiku Mori

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.
22
rolinger
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.

20
Andrew

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;
  }
}
15
Jirapong
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 ...

6
Nguoi Viet Nam

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.

6
SphynxTech

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.

6
jmbertucci

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) ;
    }
5
Adam Starrh

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

4
GregN

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

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();
3
Craig Fruin

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.

3
middlewhere

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.

2
bokor

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

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

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.

2
Mimo

Sie können es auch so machen:

function clearMarkers(category){ 
  var i;       

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

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

1
Ogglas

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);
    }
});
0
Felipe Miosso

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();
0
Geka P

Ich benutze eine Abkürzung, die die Arbeit gut macht. Mach einfach

    map.clear();
0
Uchenna Nnodim

einfach Googlemap löschen

mGoogle_map.clear();
0
RejoylinLokeshwaran

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