leaflet.js刷新地圖onclick

我使用Leaflet來可視化地圖。一切正常，直到我添加了一個複選框來切換地圖的數據。我寫的是這樣一種觀點：leaflet.js刷新地圖onclick

<input type="checkbox" name="switch" class="switch-checkbox"onclick="change();" checked>

對於JS的功能：

function change() 
{ 
    var map = L.map('map').setView([37.8, -96], 4); 

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     maxZoom: 18 
    }).addTo(map); 

    if (document.querySelector('.onoffswitch-checkbox').checked) { 
     data = statesData; 
     L.geoJson(statesData).addTo(map); 
    } else { 
     L.geoJson(statesDataTwo).addTo(map); 
    }

然後我得到的地圖已初始化錯誤。我在添加新地圖之前嘗試添加map.remove();。像建議here一樣。但地圖是未定義的。有什麼辦法做到這一點？謝謝

來源

2014-02-12 ishwr

你可以嘗試將你的問題轉換成'jsFiddle'？如果你這樣做，那麼幫助會更容易，同時你也有機會自己找到修復。 – bits

爲什麼要添加新地圖？您可能已經在全局變量map中加載時初始化它。處理這一點，並更改/點擊只更改圖層。這樣的事情：

var map = L.map('map').setView([37.8, -96], 4); 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    maxZoom: 18 
}).addTo(map); 

var geojsonLayers = { 
    'states': L.geoJson(statesData), 
    'statesTwo': L.geoJson(statesDataTwo) 
}; 

function change() 
{ 
    if (document.querySelector('.onoffswitch-checkbox').checked) { 
     map.addLayer(geojsonLayers.states); 
     if (map.hasLayer(geojsonLayers.statesTwo)) { 
      map.removeLayer(geojsonLayers.statesTwo); 
     } 
    } else { 
     map.addLayer(geojsonLayers.statesTwo); 
     if (map.hasLayer(geojsonLayers.states)) { 
      map.removeLayer(geojsonLayers.states); 
     } 
    } 
}

來源

2014-02-13 14:17:37 mattesCZ

leaflet.js刷新地圖onclick

回答

相關問題