Question

作为我为客户编写的插件的一部分，有一个显示传单地图的短代码。静态脚本＆amp; css加载到页脚中，我可以通过wp_localize_script将参数传递给它。

我需要的是在mouseover事件上添加一个图层并在mouseout上删除它。只要每页只有一个传单地图就行了。但是，如果同一页面中存在多个地图，则鼠标事件仅应用于最后一个地图。

这是我说的最小的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，模拟上面脚本的两次连续调用：

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

Answer 1

这是一个范围问题。

id是一个全局变量，因此每次调用console.log(id);时，它都会使用最后设置为"map2"的全局ID。

要修复它，请将创建代码放入如下函数中：

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/

mouseover事件仅适用于最后创建的传单映射

1 个答案: