使用傳單時遇到問題removeLayer

Question

我是JavaScript新手，試圖用傳單製作地圖。我的目標是有一個可以選擇圖層的下拉框。如果選擇一個圖層，則應該顯示該圖層，並且地圖上的現有圖層應該消失。我可以讓新圖層出現，但在選擇另一圖層時它不會消失。他們只是堆疊在一起。

我試過用「平變化」（都只有從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); 
});