Google Maps API v3: Wie entferne ich alle Markierungen?

Wenn ich in Google Maps API v2 alle Kartenmarkierungen entfernen wollte, konnte ich einfach Folgendes tun:

map.clearOverlays();

Wie mache ich das in Google Maps API v3 ?

Wenn ich mir die Referenz-API anschaue, ist mir das unklar.

Gehen Sie einfach wie folgt vor:

I. Deklarieren Sie eine globale Variable:

var markersArray = [];

II. Definieren Sie eine Funktion:

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

ODER

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 die Markierungen im 'markerArray', bevor Sie Folgendes aufrufen:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Rufen Sie die Funktion clearOverlays();oder auf map.clearOverlays();, wo immer dies erforderlich ist.

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 nun 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 Markierungen, die Sie auf der Karte haben, in einem Array zu behalten. Und wenn Sie sie alle löschen möchten, durchlaufen Sie einfach das Array und rufen Sie die .setMap (null) -Methode für jede der Referenzen auf.

Weitere Informationen / Code finden Sie in dieser Frage.

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 beseitigt, addMarker manuell aufzurufen.

Vorteile

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

Nachteile

• Die Verwendung von Prototypen und Wrappern wie jetzt macht meinen Code von Google-Code abhängig. Wenn sie eine Bürgermeisteränderung in ihrer Quelle vornehmen, wird dies nicht funktionieren.
• 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 brechen wird, aber immer noch ..
• Wenn Sie einen Marker manuell entfernen, befindet sich seine Referenz weiterhin im Marker-Array. (Sie können meine setMap-Methode bearbeiten, um das Problem zu beheben, jedoch auf Kosten der Schleife durch das Markierungsarray und des Entfernens der Referenz.)

Dies war die einfachste aller Lösungen, die ursprünglich von YingYang am 11. März 14 um 15: 049 unter der ursprünglichen Antwort auf die ursprüngliche Frage des Benutzers veröffentlicht wurden

Ich verwende seine gleiche 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, eine Referenz beizubehalten, als ich ihn in meine Codebasis eingefügt habe, sodass ich nicht weiß, woher er stammt.

In der neuen Version v3 wurde empfohlen, in Arrays zu bleiben. wie folgt.

Siehe Beispiel in der 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;
  }
}

In der Demo-Galerie von Google finden Sie eine Demo dazu:

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.

Kurz gesagt, 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. "Löschen" bedeutet für dieses Beispiel, sie aus der Karte zu entfernen, aber im Array zu belassen, sodass die Anwendung sie schnell wieder zur Karte hinzufügen kann. In gewissem Sinne verhält sich dies so, als würde man sie "verstecken".

"Löschen" löscht auch das Array.

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

arbeitet nur am IE.

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

Arbeiten an Chrom, Firefox, dh ...

Die Lösung ist ganz einfach. Sie können die Methode verwenden : marker.setMap(map);. Hier legen Sie fest, auf welcher Karte der Pin angezeigt wird.

Wenn Sie also nulldiese Methode ( marker.setMap(null);) festlegen , verschwindet der Stift.

Jetzt können Sie eine Funktion schreiben, während alle Markierungen in Ihrer Karte verschwinden.

Sie fügen einfach hinzu, um Ihre Pins in ein Array einzufügen und sie mit markers.push (your_new pin)oder diesem Code zu deklarieren, 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 Markierungen 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 Ihre Marker zu verschwinden, sollten Sie die Funktion aufrufen mit null:

// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

Und um alle Ihre Marker zu entfernen und zu verschwinden, sollten Sie Ihr Array von Markern 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 mich reduzieren könnte. Seien Sie vorsichtig, YOUR_API_KEYwenn Sie den 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 den Google-Entwickler oder die vollständige Dokumentation auf der Google-Entwickler-Website konsultieren .

Eine saubere und einfache Anwendung der Antwort von Rolinger.

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 set_mapin beiden Antworten veröffentlichte Funktion " " scheint in der Google Maps v3-API nicht mehr zu funktionieren.

Ich frage mich, was passiert ist

Aktualisieren:

Es scheint, dass Google seine 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 Markierungen:

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

Das Folgende von Anon funktioniert perfekt, obwohl es beim wiederholten Löschen der Überlagerungen flackert.

Gehen Sie einfach wie folgt vor:

I. Deklarieren Sie eine globale Variable:

var markersArray = [];

II. Definieren Sie eine Funktion:

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

III. Drücken Sie die Markierungen im 'markerArray', bevor Sie Folgendes aufrufen:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Rufen Sie die clearOverlays()Funktion auf, wo immer dies erforderlich ist.

Das ist es!!

Hoffe das wird dir helfen.

Ich fand die Verwendung der Markermanager-Bibliothek im Projekt Google-Maps-Utility-Library-v3 am einfachsten.

1. Richten Sie den MarkerManager ein

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

2. Fügen Sie dem MarkerManager Marker hinzu

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

3. Um Markierungen zu löschen, müssen Sie nur die clearMarkers()Funktion des MarkerManger aufrufen

mgr.clearMarkers();

Sie können es auch so machen:

function clearMarkers(category){ 
  var i;       

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

Ich habe dies gerade mit kmlLayer.setMap (null) versucht und es hat funktioniert. Ich bin mir nicht sicher, ob dies mit normalen Markern funktionieren würde, scheint aber korrekt zu funktionieren.

Um alle Überlagerungen einschließlich Polys, Marker usw. zu entfernen ...

Verwenden Sie einfach:

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

Hier ist eine Funktion, die ich geschrieben habe, um sie in einer Kartenanwendung zu erstellen:

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

So entfernen Sie alle Markierungen von der Karte: Erstellen Sie Funktionen wie folgt:

1.addMarker (Ort): Diese Funktion dient zum Hinzufügen von Markern auf der Karte

2.clearMarkers (): Mit dieser Funktion werden alle Markierungen aus der Karte entfernt, nicht aus dem Array

3.setMapOnAll (map): Mit dieser Funktion werden Markierungsinformationen zum Array hinzugefügt

4.deleteMarkers (): Diese Funktion löscht alle Marker 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. Markierungen (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
  });
}

Für den Fall, dass die Markierungen über den Zeichenmanager hinzugefügt werden , ist es am besten, ein globales Array von Markierungen zu erstellen oder die Markierungen 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 von google.maps.data verwenden können.

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 setMap(null)auf meine Marker hat bei mir nicht funktioniert, wenn ich benutze DirectionsRenderer.

In meinem Fall musste ich anrufen , setMap(null)um meinen DirectionsRendererauch.

So ähnlich:

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

Gehen Sie einfach über Markierungen und entfernen Sie sie von der Karte. Danach leeren Sie die Markierungsanordnung für Karten:

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

lösche einfach Googlemap

mGoogle_map.clear();

Ich habe alle vorgeschlagenen Lösungen ausprobiert, aber nichts hat bei mir funktioniert, während sich alle meine Marker unter einem Cluster befanden. Schließlich habe ich nur folgendes gesagt:

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

Du meinst entfernen wie beim Ausblenden oder Löschen?

wenn versteckt:

function clearMarkers() {
            setAllMap(null);
        }

wenn Sie sie löschen möchten:

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

Beachten Sie, dass ich Array-Markierungen verwende, um sie zu verfolgen und manuell zurückzusetzen.

Sie müssen map null auf diese Markierung setzen.

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

Ich habe eine einfache Lösung gefunden (glaube ich):

var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}

Ich benutze eine Kurzschrift, die den Job gut macht. Mach einfach

    map.clear();

Wenn Sie das gmap V3-Plugin verwenden: $("#map").gmap("removeAllMarkers");

Siehe: http://www.smashinglabs.pl/gmap/documentation#after-load

Ich weiß, dass dies vielleicht eine einfache Lösung ist, aber das ist, was ich tue

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

Funktioniert jedes Mal für mich.