Nell'API di Google Maps v2, se volessi rimuovere tutti gli indicatori delle mappe, potrei semplicemente fare:
map.clearOverlays();
Come faccio a farlo nell'API di Google Maps v3 ?
Guardando l' API di riferimento , non mi è chiaro.
Nell'API di Google Maps v2, se volessi rimuovere tutti gli indicatori delle mappe, potrei semplicemente fare:
map.clearOverlays();
Come faccio a farlo nell'API di Google Maps v3 ?
Guardando l' API di riferimento , non mi è chiaro.
Risposte:
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. Inserire i marker nell'array marker prima di chiamare quanto segue:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Chiamare la funzione clearOverlays();
o map.clearOverlays();
dove richiesto.
Questo è tutto!!
markersArray
un array vuoto invece di impostarne la lunghezza, cosa che trovo strana:markersArray = [];
while
approccio per l'elaborazione della matrice: while(markersArray.length) { markersArray.pop().setMap(null); }
. Successivamente non è necessario cancellare l'array.
Stesso problema. Questo codice non funziona più.
L'ho corretto, cambia il metodo clearMarkers in questo modo:
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();
};
La documentazione è stata aggiornata per includere dettagli sull'argomento: https://developers.google.com/maps/documentation/javascript/markers#remove
new Array();
?
Sembra che non ci sia ancora una tale funzione in V3.
Le persone suggeriscono di conservare i riferimenti a tutti gli indicatori presenti sulla mappa in un array. E poi, quando vuoi eliminarli tutti, esegui il loop attraverso l'array e chiama 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 http://www.lootogo.com/googlemapsapi3/markerPlugin.html Ho rimosso la necessità di chiamare manualmente addMarker.
Professionisti
Contro
Questa era 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.
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();
};
Non credo che ce ne sia uno in V3, quindi ho usato l'implementazione personalizzata sopra.
Disclaimer: non ho scritto questo codice ma ho dimenticato di conservare un riferimento quando l'ho unito al mio codebase, quindi non so da dove provenga.
Sulla nuova versione v3, hanno consigliato di tenere in array. come segue.
Vedi esempio alla panoramica dell'overlay .
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;
}
}
La Galleria demo di Google ha una demo su come lo fanno:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
È possibile visualizzare il codice sorgente per vedere come aggiungono marcatori.
Per farla breve, mantengono i marker in un array globale. Quando li cancella / elimina, eseguono il ciclo attraverso l'array e chiamano ".setMap (null)" sull'oggetto marker indicato.
Tuttavia, questo esempio mostra un "trucco". "Clear" per questo esempio significa rimuoverli dalla mappa ma tenerli nell'array, il che consente all'applicazione di aggiungerli rapidamente alla mappa. In un certo senso, ciò si comporta come "nascondendoli".
"Elimina" cancella anche l'array.
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è ...
La soluzione è abbastanza semplice È possibile utilizzare il metodo: marker.setMap(map);
. Qui, definisci su quale mappa apparirà il perno.
Quindi, se si imposta null
in questo metodo ( marker.setMap(null);
), il pin scomparirà.
Ora puoi scrivere una funzione strega mentre fai scomparire tutti gli indicatori nella tua mappa.
Basta aggiungere per mettere i pin in un array e dichiararli con markers.push (your_new pin)
o questo codice, ad 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 può impostare o eliminare 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 scomparire 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 scomparire, tutti i tuoi marker, dovresti ripristinare la tua serie di marker in questo modo:
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
Questo è il mio codice completo. È il più semplice che potrei ridurre a.
Fai attenzione a sostituire YOUR_API_KEY
il codice con l'API google chiave:
<!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>
È possibile consultare lo sviluppatore di Google o la documentazione completa anche sul sito Web dello sviluppatore di Google .
Un'applicazione semplice e pulita della risposta di 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) ;
}
La set_map
funzione " " pubblicata in entrambe le risposte sembra non funzionare più nell'API di Google Maps v3.
Mi chiedo cosa sia successo
Aggiornare:
Sembra che Google abbia cambiato la sua API in modo tale che " set_map
" non sia " setMap
".
http://code.google.com/apis/maps/documentation/v3/reference.html
Qui puoi trovare un esempio di come rimuovere i marker:
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 = [];
}
Quanto segue da Anon funziona perfettamente, anche se con sfarfallio quando si eliminano ripetutamente le sovrapposizioni.
Basta fare quanto segue:
I. Dichiara una variabile globale:
var markersArray = [];
II. Definire una funzione:
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
III. Inserire i marker nell'array marker prima di chiamare quanto segue:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Chiamare la clearOverlays()
funzione dove richiesto.
Questo è tutto!!
Spero che ti possa aiutare.
for(in in markersArray){}
probabilmente non fa quello che ti aspetti che faccia. Se Array
viene esteso in qualsiasi altra parte del codice, scorrerà anche su quelle proprietà e non solo sugli indici. La versione javascript di questo è markersArray.forEach()
che non è supportata ovunque. Staresti meglio confor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
Ho trovato l'uso della libreria markermanager nel progetto google-maps-utility-library-v3 come il modo più semplice.
1. Configurare MarkerManager
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
loadMarkers();
});
2. Aggiungere marcatori a MarkerManager
function loadMarkers() {
var marker = new google.maps.Marker({
title: title,
position: latlng,
icon: icon
});
mgr.addMarker(marker);
mgr.refresh();
}
3. Per cancellare i marker devi solo chiamare la clearMarkers()
funzione MarkerManger
mgr.clearMarkers();
clearMarkers
fa è iterare sui marcatori di chiamata marker.setMap(null)
(ho controllato la fonte). Sarebbe meno lavoro metterli in un array e farlo da soli.
Per cancellare tutti gli overlay inclusi poligoni, pennarelli, ecc ...
usa semplicemente:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
Ecco una funzione che ho scritto per farlo da me su un'applicazione di mappa:
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"));
}
Per rimuovere tutti i marker dalla mappa, creare funzioni come questa:
1.addMarker (posizione): questa funzione utilizzata per aggiungere un marker sulla mappa
2.clearMarkers (): questa funzione rimuove tutti i marker dalla mappa, non dall'array
3.setMapOnAll (mappa): questa funzione utilizzata per aggiungere informazioni sui marker nell'array
4.deleteMarkers (): questa funzione Elimina tutti i marker nell'array rimuovendone i riferimenti.
// 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 = [];
}
Il modo più pulito per farlo è quello di scorrere su tutte le funzionalità della mappa. I marcatori (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 marker vengano aggiunti tramite Gestione disegni , è meglio creare un array globale di marker o spingere i marker nel livello dati durante la 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 altri metodi di classe google.maps.data in un secondo momento.
Questo è il metodo che Google stesso utilizza in almeno un esempio:
var markers = [];
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
Controlla l'esempio di Google per un esempio di codice completo:
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
Non so perché, ma l'impostazione setMap(null)
per i miei marker non ha funzionato per me quando lo sto usando DirectionsRenderer
.
Nel mio caso ho dovuto chiamare setMap(null)
anche il 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);
}
});
basta cancellare Googlemap
mGoogle_map.clear();
Ho provato tutte le soluzioni proposte, ma nulla ha funzionato per me mentre tutti i miei marcatori erano sotto un cluster. Alla fine ho appena 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();
Devi impostare la mappa null su quel marker.
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);
}
Uso una stenografia che fa bene il lavoro. Basta fare
map.clear();
se usi il plugin gmap V3:
$("#map").gmap("removeAllMarkers");
vedi: http://www.smashinglabs.pl/gmap/documentation#after-load
So che questa è forse una soluzione semplice, ma è quello che faccio
$("#map_canvas").html("");
markers = [];
Funziona ogni volta per me.