mouseover事件僅適用於創建的最後一張傳單地圖

作爲我爲客戶端編寫的插件的一部分，有一個顯示傳單地圖的簡碼。腳本中加載了靜態腳本& css，我可以通過wp_localize_script將參數傳遞給它。mouseover事件僅適用於創建的最後一張傳單地圖

我需要的是在mouseover事件上添加一個圖層，並在鼠標移除時將其刪除。只要每個頁面只有一張傳單地圖，它就可以工作。但是，如果同一頁面中存在多個地圖，則鼠標事件僅應用於最後的地圖。

這是最小的一塊，因爲我說的作品javascript代碼：

if (typeof map == 'undefined'){ 
    var map = {}; 
    var layer_bg = {}; 
} 

map[id] = L.map(id.toString(10)).setView([51.505, -0.09], 6); 
layer_bg[id] = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'); 

map[id].on('mouseover', function(e) { 
    console.log(id); 
    map[id].addLayer(layer_bg[id]); }); 
map[id].on('mouseout', function(e) { 
    map[id].removeLayer(layer_bg[id]); });

腳本接收每次調用不同的ID參數，但這些事件僅適用於上次使用的ID。

我沒有想法解決這個問題，但我希望有一個簡單的解決方案，我忽略了。這裏是一個非常簡單的jsfiddle模擬連續2調用上面的腳本：

http://jsfiddle.net/LTYvq/1/

來源

2013-10-05 joseLuís

這是一個範圍問題。

id是一個全局變量，所以每次你打電話console.log(id);它將使用全局ID，這是最後一組到"map2"。

爲了解決這個問題，把創建代碼到一個函數，像這樣：

function createMap(id) { 

    if (typeof map == 'undefined'){ 
    map = {}; 
    layer_bg = {}; 
    } 

    map[id] = L.map(id.toString(10)).setView([51.505, -0.09], 6); 
    layer_bg[id] = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'); 

    map[id].on('mouseover', function(e) { 
    console.log(id); 
    map[id].addLayer(layer_bg[id]); }); 
    map[id].on('mouseout', function(e) { 
    map[id].removeLayer(layer_bg[id]); }); 
}

，然後調用

createMap("map1"); 
createMap("map2");

更多關於範圍，見What is the scope of variables in JavaScript?

我更新你撥弄這裏：http://jsfiddle.net/LTYvq/3/

來源

2013-10-05 00:59:03

我知道它一定是非常簡單的！關於示波器的鏈接非常方便。非常感謝你。 –

mouseover事件僅適用於創建的最後一張傳單地圖

回答

相關問題