Question

我是javascript的新手并尝试使用传单制作地图。我的目标是有一个包含您可以选择的图层的下拉框。如果选择一个图层，则应显示该图层，并且地图上的现有图层应消失。我可以让新图层出现，但是当选择另一个图层时它永远不会消失。他们只是堆在一起。

我尝试过使用“onchange”的各种迭代（都是从javascript调用，并从<select>元素调用js函数。下面是我正在使用的演示代码。

<select id='map-ui' onchange="toggle_layer();">
    <option>Please choose a layer</option>
    <option value="examples.bike-lanes">bike lanes</option>
    <option value="examples.bike-locations">bike stations</option>
</select>
<div id='map'></div>
<script>
var map = L.map('map').setView([38.902, -77.001], 13);

var base_map = 'examples.map-zgrqqx0w'
map.addLayer(L.mapbox.tileLayer(base_map));

var mapUI = document.getElementById("map-ui");
var shown_layer;

function toggle_layer(){
    var selectedValue = mapUI.options[mapUI.selectedIndex].value;
    if (shown_layer != selectedValue){
        map.removeLayer(L.mapbox.tileLayer(shown_layer));
    };
    map.addLayer(L.mapbox.tileLayer(selectedValue));
    shown_layer = selectedValue;
};
</script>

Answer 1

您的shown_layer变量应为L.mapbox.tileLayer(selectedValue)。然后map.removeLayer(shown_layer);应该有效。

无论如何，这是使用jQuery（JSFiddle）：

的代码示例

var map = L.map('map').setView([38.902, -77.001], 13);
map.addLayer(L.mapbox.tileLayer('examples.map-zgrqqx0w')); 

var shown_layer;

$("#map-ui").change(function() {
    var selected = $("#map-ui option:selected").val();

    if(selected === "") return;

    if(shown_layer !== undefined)
        map.removeLayer(shown_layer);

    shown_layer = L.mapbox.tileLayer(selected);
    map.addLayer(shown_layer); 
});

传单removeLayer有问题

1 个答案: