IT-Swarm.Net

Google Maps API v3: Kako ukloniti sve markere?

U Google Maps API v2, ako želim ukloniti sve oznake karata, jednostavno bih mogao učiniti:

map.clearOverlays();

Kako to mogu učiniti u API-ju Google Maps v3 ?

Gledajući Reference API , nejasno mi je.

418
mp_

Jednostavno napravite sljedeće:

I. Izjavite globalnu varijablu:

var markersArray = [];

II. Definirajte funkciju:

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. Prije pozivanja sljedećeg pritisnite na markere u 'markerArray':

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

IV. Pozovite funkciju clearOverlays(); ili map.clearOverlays(); kad god je potrebno.

To je to!!

475
anon

Isti problem. Taj kôd više ne radi.

Ispravio sam je, izmijenite metodu clearMarkers na ovaj način:

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

Dokumentacija je ažurirana tako da uključuje detalje o temi: https://developers.google.com/maps/documentation/javascript/markers#remove

83
Pons

Čini se da u V3 još nema takve funkcije.

Ljudi predlažu da se reference na sve markere na karti zadrže u nizu. A onda kad ih želite obrisati, samo petljajte kroz niz i pozovite .setMap (null) metodu na svaku od referenci.

Pogledajte ovo pitanje za više informacija/kod.

Moja verzija:

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

Kod je uređena verzija ovog koda http://www.lootogo.com/googlemapsapi3/markerPlugin.html Uklonila sam potrebu ručno nazvati addMarker.

Prozodija

  • Na ovaj način kôd držite kompaktnim i na jednom mjestu (ne zagađuje prostor imena).
  • Ne morate više pratiti markere, uvijek možete pronaći sve markere na karti pozivanjem map.getMarkers ()

Kontra

  • Korištenje prototipova i omota kao što sam to učinio sada moj kôd ovisi o Google kodu, ako prouzroče gradonačelnika da promijeni izvor, to će se pokvariti.
  • Ako ga ne razumijete, nećete ga moći popraviti ako dođe do puknuća. Male su šanse da će promijeniti sve što će ovo razbiti, ali svejedno ..
  • Ako ručno uklonite jedan marker, referenca će i dalje biti u nizu markera. (Možete urediti moju metodu setMap da je popravite, ali pod cijenu preskakanja polja markera i uklanjanja reference)
46
Maiku Mori

Ovo je bilo najjednostavnije od svih rješenja koje je prvotno objavio YingYang 11. ožujka '14. U 15.49 pod originalnim odgovorom na prvobitno pitanje korisnika

Koristim njegovo isto rješenje 2,5 godine kasnije s google mapama v3.18 i to djeluje poput šarma

markersArray.Push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.
23
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();
};

Mislim da u V3 ne postoji pa sam koristio gornju prilagođenu implementaciju.

Izjava o odricanju odgovornosti: Nisam napisao ovaj kôd, ali sam zaboravio zadržati referencu kad sam je spojio u svoju kodnu bazu, tako da ne znam odakle dolazi.

21
Andrew

Na novoj verziji v3, preporučili su zadržati se u nizovima. kako slijedi.

Pogledajte uzorak na prekrivanje-pregled .

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;
  }
}
16
Jirapong
for (i in markersArray) {
  markersArray[i].setMap(null);
}

radi samo na IE.


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

radeći na kromu, firefoxu, tj. ...

6
Nguoi Viet Nam

Rješenje je prilično jednostavno. Možete koristiti metodu: marker.setMap(map);. Ovdje definirate na kojoj će se karti prikazivati ​​pin.

Dakle, ako u ovoj metodi postavite null (marker.setMap(null);), pin će nestati.


Sada možete napisati funkcijsku vješticu dok nestanete svi markeri na karti.

Vi samo dodajte da stavite svoje igle u niz i deklarirate ih s markers.Push (your_new pin) ili ovim kodom, na primjer:

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

Ovo je funkcija koja može postaviti ili nestati sve markere u nizu na karti:

// Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

Da biste nestali svi markeri, trebali biste nazvati funkciju s null:

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

Da biste uklonili i nestali sve svoje markere, trebali biste resetirati niz markera kao što je ovaj:

// Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

Ovo je moj potpuni kod. To je najjednostavnije što bih mogao smanjiti. Pazite na punu zamjenu YOUR_API_KEY u kodu možete zamijeniti ključem google API-ja:

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

Možete konzultirati google developer ili cjelokupnu dokumentaciju na, također, web mjesto google programera .

6
SphynxTech

Googleova Demo galerija sadrži demonstraciju načina na koji to rade:

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

Možete pogledati izvorni kôd da biste vidjeli kako dodaju markere.

Kratko rečeno, oni čuvaju markere u globalnom nizu. Kad ih očistite/izbrišete, oni se petljaju kroz niz i pozivaju ".setMap (null)" na zadani objekt markera.

Međutim, ovaj primjer pokazuje jedan "trik". "Očisti" za ovaj primjer znači uklanjanje s karte, ali zadržavanje u nizu, što aplikaciji omogućuje brzo ponovno dodavanje na kartu. U određenom smislu, to djeluje poput "skrivanja" njih.

"Delete" briše i niz.

6
jmbertucci

Čista i laka primjena odgovora rolingera.

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

Čini se da funkcija "set_map" objavljena u oba odgovora više ne funkcionira u API-ju Google Maps v3.

Pitam se što se dogodilo

Update:

Čini se da je Google promijenio njihov API tako da "set_map" nije "setMap".

http://code.google.com/apis/maps/documentation/v3/reference.html

4
GregN

Ovdje možete pronaći primjer uklanjanja markera:

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

Najlakši način pronašao sam korištenje knjižnice markermanager u google-maps-utility-library-v3 projektu.

1. Postavljanje MarkerManagera

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

2. Dodajte markere u MarkerManager

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

. Da biste očistili markere, potrebno je samo nazvati funkciju MarkerMangera clearMarkers()

mgr.clearMarkers();
3
Craig Fruin

Slijedeće stranice Anon savršeno funkcioniraju, iako s treperenjem prilikom opetovanog uklanjanja slojeva.

Jednostavno napravite sljedeće:

I. Deklariranje globalne varijable:

var markersArray = [];

II. Definiranje funkcije:

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

III. Gurnite markere u 'markerArray' prije nego što nazovete sljedeće:

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

IV. Nazovite funkciju clearOverlays() gdje god je potrebno.

To je to!!

Nadam se da će vam to pomoći.

3
middlewhere

Upravo sam ovo pokušao s kmlLayer.setMap (null) i uspjelo je. Niste sigurni hoće li to raditi s uobičajenim markerima, ali čini se da radi ispravno.

2
bokor

Da biste očistili sve slojeve, uključujući poli, markere, itd. ...

jednostavno koristite:

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

Evo funkcije koju sam napisao da to učinim oblikujem na aplikaciji za kartu:

  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

Da biste uklonili sve markere s karte stvorite funkcije poput ove:

1.addMarker (lokacija): ova se funkcija koristi za dodavanje markera na kartu

2.clearMarkers (): ova funkcija uklanja sve markere s mape, a ne iz polja

3.setMapOnAll (karta): ova se funkcija koristi za dodavanje podataka o markerima u niz

4.deleteMarkers (): ova funkcija Briše sve markere iz polja uklanjanjem referenci na njih.

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

Najčišći način da se to učini je ponoviti sve značajke karte. Označivači (zajedno s poligonima, polilinama, itd.) Pohranjuju se u podatkovni sloj karte.

function removeAllMarkers() {
  map.data.forEach((feature) => {
    feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
  });
}

U slučaju da se markeri dodaju putem pravitelj crtanja , najbolje je stvoriti globalni niz markera ili gurajući markere u podatkovni sloj pri kreiranju na takav način:

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

Preporučujem drugi pristup jer vam omogućuje korištenje drugih metoda klase google.maps.data kasnije.

2
Mimo

To možete učiniti i ovako:

function clearMarkers(category){ 
  var i;       

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

To je metoda koju sami Google koristi u najmanje jednom uzorku:

var markers = [];

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

Provjerite primjer Googlea za cjelovit primjer koda:

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

1
Ogglas

Ne znam zašto, ali postavljanje setMap(null) na moje markere nije meni odgovaralo kad koristim DirectionsRenderer.

U mom slučaju morao sam nazvati setMap(null) na svoje DirectionsRenderer.

Nešto kao to:

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

Isprobao sam sva predložena rješenja, ali ništa mi nije uspjelo dok su mi svi markeri bili pod grozdom. Na kraju samo stavim ovo:

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

Drugim riječima, ako markere zamotate u klaster i želite ukloniti sve markere, nazvat ćete:

clearMarkers();
0
Geka P

Koristim skraćenicu koja posao dobro obavlja. Uradi

    map.clear();
0
Uchenna Nnodim

samo očistite Googlemap

mGoogle_map.clear();
0
RejoylinLokeshwaran

Jednostavno prijeđite markere i uklonite ih s mape, praznih nizova markera nakon toga:

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