Openlayers 3:使用for循环将click事件绑定到多个地图 [英] Openlayers 3: Binding click event to several maps using a for loop

问题描述

我会有所帮助.现在，我正在学习Openlayers3.我想将一个click事件绑定到一个for循环中的几个地图对象上.

I would appreciate a little help. Right now I'm learning Openlayers 3. I want to bind a click event to several map objects within a for loop.

当我这样做时，该事件仅应用于for循环中的最后一个地图对象:

When I do it like this, the event is only applied to the last map object within the for loop:

for(var i = 0; i< $('.easymap').length; i ++){//[...]var elem = map [i];elem.on('singleclick'，function(evt){elem.getView().setCenter(evt.coordinate);});}

我想我已经发现这是一个需要关闭"的典型问题.但是，我还没有发现如何做到这一点.

I think I already found out that this a typical problem where a "closure" is needed. However, I didn't find out how to do this yet.

以下(愚蠢的)解决方法仅适用于给定数量的映射，并且会产生许多行的冗余代码，这只是一个临时解决方案:

The following (stupid) workaround, which works only for a given number of maps and produces many lines of redundant code, is only a temporary solution:

//稍后解决(使动态，学习如何使用闭包...)if($('#easymap1').length&& $('#easymap1').hasClass('addpost'))map [0] .on('singleclick'，function(evt){/* alert(ol.coordinate.format(evt.coordinate，'{x}')+''+ ol.coordinate.format(evt.coordinate，'{y}')); */map [0] .getView().setCenter(evt.coordinate);});if($('#easymap2').length&& $('#easymap2').hasClass('addpost'))map [1] .on('singleclick'，function(evt){map [1].getView().setCenter(evt.coordinate);});if($('#easymap3').length&& $('#easymap3').hasClass('addpost'))map [2] .on('singleclick'，function(evt){map [2].getView().setCenter(evt.coordinate);});if($('#easymap4').length&& $('#easymap4').hasClass('addpost'))map [3] .on('singleclick'，function(evt){map [3].getView().setCenter(evt.coordinate);});if($('#easymap5').length&& $('#easymap5').hasClass('addpost'))map [4] .on('singleclick'，function(evt){map [4].getView().setCenter(evt.coordinate);});

那么，有谁能告诉我如何将其集成到适当的for循环中?谢谢.

So, does can anyone tell my how to integrate this into a proper for loop? Thank you.

最诚挚的问候joschi81

Best regards joschi81

推荐答案

问题是，在for循环的每个迭代中都创建了处理程序，这意味着在上一次迭代中，处理程序对elem的引用对应于最后一张地图.因此，即使通过单击另一个地图而触发了处理程序，它也会将中心设置为存储在变量elem中的地图.但是singleclick事件包含被单击的地图，因此您可以轻松地做到这一点:

The problem is, that the handler is created in every iteration of your for loop, which means, that in the last iteration, the handler's reference to elem corresponds to the last map. So even if the handler is fired by click on another map, it sets center to the map which is stored in variable elem. But the singleclick event contains the map that was clicked, so you can easily do this:

for (var j = 0, jj = maps.length; j < jj; j++) {
  var elem = maps[j];
  elem.on('singleclick',function(evt){
    evt.map.getView().setCenter(evt.coordinate);
  });   
}

或者甚至更好(只定义一次处理程序):

or, even better (to only define the handler once):

var onMapClick = function(evt) {
  evt.map.getView().setCenter(evt.coordinate);
}

for (var j = 0, jj = maps.length; j < jj; j++) {
  var elem = maps[j];
  elem.on('singleclick', onMapClick);   
}

请参阅小提琴: http://jsfiddle.net/Kenny806/v5k97oye/

希望这会有所帮助

这篇关于Openlayers 3:使用for循环将click事件绑定到多个地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！