Question

我正在使用Leaflet来显示地图。一切正常，直到我添加了一个复选框来切换地图的数据。我为这个观点写了这样的话：

<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一样。但地图未定义。这样做的方法是什么？感谢

Answer 1

为什么要添加新地图？您可能已将它放在全局变量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);
        }
    }
}

leaflet.js刷新地图onclick

1 个答案: