Come rimuovere i dati da gmap?

Question

Vedo Google Maps supporta geojson. Guardando la documentazione qui: https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson

Dato l'ultimo esempio con il "Google", come posso farlo in modo tale che posso fare clic su un pulsante per aggiungere un nuovo livello GeoJSON, e un altro pulsante per attivare/rimuovere il " Google "o anche una lettera? Mi sembra che map.data sembra essere un singolo livello e non è più strati.

Answer 1

Si è corretto in quanto il livello dati è un singolo livello. Tuttavia, se si recupera manualmente GeoJSON e si utilizza la funzione addGeoJson anziché loadGeoJson, verranno restituite le funzionalità aggiunte. Puoi rimuoverli in seguito.

Così, invece di

map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json'); 

Si può fare qualcosa di simile (questo esempio utilizza jQuery per ottenere i dati e assume c'è un pulsante con l'ID RemoveBtn):

// Load the GeoJSON manually (works cross-origin since google sets the required HTTP headers) 
$.getJSON('https://storage.googleapis.com/maps-devrel/google.json', function (data) { 
    var features = map.data.addGeoJson(data); 

    // Setup event handler to remove GeoJSON features 
    google.maps.event.addDomListener(document.getElementById('removeBtn'), 'click', function() { 
    for (var i = 0; i < features.length; i++) 
     map.data.remove(features[i]); 
    }); 
}); 

(See this JSbin for a working example you can play around with)

In circostanze più complesse, è probabilmente necessario tenere traccia di quale origine dati è stato caricato dall'utente e le funzionalità create per questo motivo può cancellarli quando richiesto.

Answer 2

Mentre map.data è concepito come un segnaposto per il caso comune di una sola origine dati, è possibile avere più, e ancora usare addGeoJSon usando qualcosa come:

// load data - do the same for data2, data3 or whatever 
data1 = new google.maps.Data(); 
data1.loadGeoJson(url1); 

// create some layer control logic for turning on data1 
data1.setMap(map) // or restyle or whatever 

// turn off data1 and turn on data2 
data1.setMap(null) // hides it 
data2.setMap(map) // displays data2 

Answer 3

Questo ha funzionato per me:

map.data.forEach(function(feature) { 
    // filter... 
    map.data.remove(feature); 
});