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

回答

相关问题