0

作为我为客户编写的插件的一部分，有一个显示传单地图的简码。静态脚本和 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，它模拟了对上述脚本的 2 次连续调用：

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

4

1 回答 1

0

这是一个范围问题。

id是一个全局变量，所以每次调用console.log(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");

有关范围的更多信息，请参阅JavaScript 中变量的范围是什么？

我在这里更新了你的小提琴：http: //jsfiddle.net/LTYvq/3/

于 2013-10-05T00:59:03.607 回答