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"
}

]
InformationsquelleAutor wag0325 | 2014-06-20
Schreibe einen Kommentar