Entfernen aller Daten/Marker in der Karte Broschüre vor dem Aufruf einer anderen JSON
Bin ich abrufen verschiedener Daten zu markieren Faltblatt Karte mit verschiedenen JSON-Dateien. Jeder radio-button ruft eine andere JSON-Datei. Aber ich habe Probleme beim löschen der Marker, wenn ich wählen Sie verschiedene radio-button. Alle Marken, die nur fügt hinzu, bis aus einer JSON-Datei zu einer anderen. Ich möchte in der Lage sein, zu löschen alle Marker, wenn ich wählen Sie einen anderen radio-button.
Suchte ich herum und Lesen Sie die Karte.removeLayer(MyLayer); entfernt alle Markierungen. So habe ich ein array von Markern, genannt "Marker", und legte in einer Ebene namens "markersLayer". Als ich versuchte, entfernen "markersLayer", hat es nicht lassen Sie eine einzelne Markierung auf der Karte. Anstelle von deaktivieren vorherigen Marker aus verschiedenen JSON-Datei, bisher ist noch nichts aufgetragen.
Ich möchte nur zeigen diese Marker mit den Daten des spezifischen JSON-Datei, die ich mit ausgewählten radio-button.
HTML:
<div style="text-align: center;">
<h1 id="title">Map Visualization 3</h1>
<label><input type="radio" class="location" name="location" value="locations1" checked="checked">Location Set 1</label>
<label><input type="radio" class="location" name="location" value="locations2">Location Set 2</label>
<label><input type="radio" class="location" name="location" value="locations3">Location Set 3</label>
<ul id="location-list"></ul>
<div id="map" style="width: 80%; max-width: 900px; height: 600px; margin: 0 auto;"></div>
</div>
JS:
var map;
var markers = [];
var markersLayer;
var updateMap = function() {
var uri = $('input.location:checked').val() + '.json';
$.getJSON(uri, function(response){
$('ul#location-list').empty();
var locationCoor = [];
var marker;
for(var i=0; i < response.length; i++){
var lat = response[i].latitude;
var lon = response[i].longitude;
$('ul#location-list').append('<li>(' + lat + ', ' + lon + ')</li>');
//console.log(lat, lon);
locationCoor[i] = [lat, lon];
//console.log(locationCoor);
var popup = L.popup()
.setLatLng([lat, lon])
.setContent('<h3 style="margin:0 0 3px 0;"><a href="' + response[i].link + '">' + response[i].title + '</a></h3><img width="180px" height="auto" src="' + response[i].imageUrl + '">');
marker = L.marker([lat, lon], {
clickable: true
}).bindPopup(popup, {showOnMouseOver:true});
markers[i] = marker;
console.log(markers);
}
markersLayer = L.layerGroup(markers);
markersLayer.addTo(map);
var bounds = new L.latLngBounds(locationCoor);
map.fitBounds(bounds, {padding: [50,50]});
markers.length = 0;
});
};
$(document).ready(function(){
map = L.map('map');
L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
maxZoom: 18,
id: 'examples.map-20v6611k'
}).addTo(map);
$('input.location').on('change', updateMap);
updateMap();
});
JSON-1:
[
{
"title": "Weathertop",
"link": "http://en.wikipedia.org/wiki/Weathertop",
"latitude": 38.80,
"longitude": -77.12,
"imageUrl": "assets/img/location-images/Weathertop.jpg"
},
{
"title": "Rivendell",
"link": "http://lotr.wikia.com/wiki/Rivendell",
"latitude": 38.78,
"longitude": -77.18,
"imageUrl": "assets/img/location-images/Rivendell2.jpg"
},
{
"title": "Minas Tirith",
"link": "http://lotr.wikia.com/wiki/Minas_Tirith",
"latitude": 38.76,
"longitude": -77.18,
"imageUrl": "assets/img/location-images/320px-Minas_Tirith.jpg"
}
]
JSON2:
[
{
"title": "Chicago",
"link": "http://en.wikipedia.org/wiki/Weathertop",
"latitude": 41.836,
"longitude": -87.604980,
"imageUrl": "assets/img/location-images/Weathertop.jpg"
},
{
"title": "Detroit",
"link": "http://lotr.wikia.com/wiki/Rivendell",
"latitude": 42.326062,
"longitude": -83.078613,
"imageUrl": "assets/img/location-images/Rivendell2.jpg"
},
{
"title": "Indianopolis",
"link": "http://lotr.wikia.com/wiki/Minas_Tirith",
"latitude": 39.741,
"longitude": -86.154785,
"imageUrl": "assets/img/location-images/320px-Minas_Tirith.jpg"
}
]
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie nicht neu zu erstellen, die
markersLayer
Objekt. Was Sie wollen, ist erstellen Sie es einmal, und dann weiter zum hinzufügen/entfernen von Markern aus.In Ihrer Linie, in dem Sie definieren die
markersLayer
am Anfang der Datei, die Sie nun auch definieren möchten ihn hier als L. LayerGroup. Wir werden nicht neu erstellen dieses Objekts.Wenn Sie möchten, um die Karte zu aktualisieren, die Sie löschen, werden alle vorhandenen Markierungen aus dem
markersLayer
. Dies erfolgt durch aufrufenmarkersLayer.clearLayers()
. Dies wird nicht entfernen Sie diemarkersLayer
von der Karte. Es wird nur entfernen Sie die Markierungen in diesem layer enthält.Einmal alle Marker entfernt wurden, aus dieser Ebene, Sie sind jetzt frei, um neue Ebenen zu
markersLayer
.Ihr code wird wie folgt Aussehen:
Finden : Entfernen Merkblatt Schichten und L.-marker-Methode
Grundkonzept : Statt der addition aller Marker direkt auf der Karte, können Sie den Marker auf einem separaten layer (z.B.
var markers = new L.FeatureGroup();
) und dann hinzufügen, dass der layer auf der Karte (map.addLayer(markers);
) außerhalb der Schleife.JSFiddle