javascript - remove - put markers on google maps




API di Google Maps v3: come rimuovere tutti i marcatori? (20)

Nell'API di Google Maps v2, se volevo rimuovere tutti gli indicatori di mappa, potrei semplicemente fare:

map.clearOverlays();

Come faccio a farlo in Google Maps API v3 ?

Guardando l' API di riferimento , non è chiaro per me.


Basta camminare su marcatori e rimuoverli dalla mappa, array di indicatori di mappe vuote dopo che:

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

Basta fare quanto segue:

I. Dichiara una variabile globale:

var markersArray = [];

II. Definire una funzione:

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

O

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

III. Premi i marcatori nel 'markerArray' prima di chiamare quanto segue:

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

IV. Chiama il clearOverlays(); o map.clearOverlays(); funzione ovunque richiesto

Questo è tutto!!


Ho appena provato questo con kmlLayer.setMap (null) e ha funzionato. Non sono sicuro che funzioni con i normali marker ma sembra funzionare correttamente.


Ho provato tutte le soluzioni proposte, ma nulla ha funzionato per me mentre tutti i miei marcatori erano sotto un cluster. Alla fine ho solo messo questo:

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

In altre parole, se si avvolgono i marker in un cluster e si desidera rimuovere tutti i marker, si chiama:

clearMarkers();

Il modo più semplice per farlo è quello di scorrere tutte le funzionalità della mappa. I marker (insieme a poligoni, polilinee, ecc.) Sono memorizzati nel livello dati della mappa.

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

Nel caso in cui i marcatori vengano aggiunti tramite il gestore disegni , è meglio creare una serie globale di marcatori o spingere i marcatori nel livello dati sulla creazione in questo modo:

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

Raccomando il secondo approccio in quanto consente di utilizzare in seguito altri metodi di classe google.maps.data.


La Demo Gallery di Google ha una demo su come lo fanno:

overlay-overview

È possibile visualizzare il codice sorgente per vedere come aggiungono marcatori.

Per farla breve, mantengono i marcatori in una serie globale. Quando si cancellano / eliminano, passano attraverso l'array e chiamano ".setMap (null)" sull'oggetto marker specificato.

Tuttavia, questo esempio mostra un "trucco". "Cancella" per questo esempio significa rimuoverli dalla mappa ma tenerli nell'array, che consente all'applicazione di riaggiungerli rapidamente alla mappa. In un certo senso, questo agisce come "nascondendoli".

"Elimina" cancella anche l'array.


La soluzione è abbastanza semplice. Puoi usare il metodo: marker.setMap(map); . Qui, definisci su quale mappa apparirà il pin.

Quindi, se imposti il ​​valore null in questo metodo ( marker.setMap(null); ), il pin sparirà.

Ora puoi scrivere una funzione strega mentre fai sparire tutti i marcatori nella tua mappa.

Basta aggiungere per mettere i birilli in un array e dichiararli con markers.push (your_new pin) o questo codice per esempio:

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

Questa è una funzione che la strega può impostare o far scomparire tutti i marker dell'array nella mappa:

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

Per far sparire tutti i tuoi marcatori, dovresti chiamare la funzione con null :

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

E, per rimuovere e sparire, tutti i tuoi segnalini, dovresti resettare la tua schiera di segnalini come questo:

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

Questo è il mio codice completo È il più semplice a cui potrei ridurre. Stai YOUR_API_KEY puoi sostituire YOUR_API_KEY nel codice con la tua chiave 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>

Puoi consultare lo sviluppatore google o la documentazione completa anche sul sito web degli sviluppatori di google .


Non so perché, ma l'impostazione di setMap(null) sui miei marcatori non ha funzionato per me quando utilizzo DirectionsRenderer .

Nel mio caso ho dovuto chiamare setMap(null) al mio DirectionsRenderer .

Qualcosa del genere:

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

Per rimuovere tutti i marcatori dalla mappa, crea funzioni come questa:

1.addMarker (posizione): questa funzione utilizzata per aggiungere un marcatore sulla mappa

2.clearMarkers (): questa funzione rimuove tutti i marker dalla mappa, non dalla matrice

3.setMapOnAll (mappa): questa funzione utilizzata per aggiungere informazioni sugli indicatori nell'array

4.deleteMarkers (): questa funzione Elimina tutti i marcatori nell'array rimuovendo i riferimenti ad essi.

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

Puoi farlo anche in questo modo:

function clearMarkers(category){ 
  var i;       

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

Questa è stata la più semplice di tutte le soluzioni originariamente pubblicate da YingYang l'11 marzo 14 alle 15: 049 sotto la risposta originale alla domanda originale degli utenti

Sto usando la sua stessa soluzione 2,5 anni dopo con Google Maps v3.18 e funziona come un fascino

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

// No need to clear the array after that.


Sembra che non ci sia ancora tale funzione in V3.

Le persone suggeriscono di mantenere i riferimenti a tutti i marcatori che hai sulla mappa in un array. E poi quando si desidera eliminare em tutti, basta eseguire il ciclo attraverso la matrice e chiamare il metodo .setMap (null) su ciascuno dei riferimenti.

Vedi questa domanda per maggiori informazioni / codice.

La mia versione:

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

Il codice è la versione modificata di questo codice lootogo.com/googlemapsapi3/markerPlugin.html Ho rimosso la necessità di chiamare manualmente addMarker.

Professionisti

  • In questo modo mantieni il codice compatto e in un unico posto (non inquina lo spazio dei nomi).
  • Non devi più tenere traccia dei marcatori da solo, puoi sempre trovare tutti i segnalini sulla mappa chiamando map.getMarkers ()

Contro

  • L'utilizzo di prototipi e wrapper come quello che ho fatto ora rende il mio codice dipendente dal codice di Google, in caso di modifica di un sindaco nella sua origine, questo si interromperà.
  • Se non lo capisci, non potrai ripararlo se si rompe. Le probabilità sono basse che cambieranno tutto ciò che lo spezzerà, ma comunque ..
  • Se rimuovi un marker manualmente, il riferimento sarà ancora nella matrice dei marker. (Puoi modificare il mio metodo setMap per risolverlo, ma al costo del looping degli array dei marker di valle e della rimozione del riferimento)

So che forse questa è una soluzione semplice, ma è quello che faccio

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

Funziona sempre per me.


Sulla nuova versione v3, raccomandavano di mantenere gli array. come segue.

Vedi esempio in 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;
  }
}

Un'applicazione semplice e pulita della risposta di Rolando.

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

Uso una stenografia che fa bene il lavoro. Basta fare

    map.clear();

Vuoi dire rimuovere come nascondendoli o cancellandoli?

se nascosto:

function clearMarkers() {
            setAllMap(null);
        }

se desideri eliminarli:

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

notare che io uso un marcatore di array per tenerne traccia e ripristinarlo manualmente.



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

sta lavorando solo su IE.

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

lavorando su chrome, firefox, cioè ...







google-maps-api-3