Question

我会感激一点帮助。现在我正在学习Openlayers 3.我想将一个click事件绑定到for循环中的几个map对象。

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

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

我想我已经发现这是一个典型的问题，其中一个＆＃34;关闭＆＃34;需要。但是，我还没有找到如何做到这一点。

以下（愚蠢的）解决方法仅适用于给定数量的地图并产生多行冗余代码，这只是一个临时解决方案：

// solve later (make dynamic, learn how to use closures... ) 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循环中？谢谢。

祝你好运 joschi81

Answer 1

ol.View不会在singleclick点击事件。因此，如果您要使用evt.coordinate，则需要确保获得ol.MapBroswerEvent。

它不清楚ol.Map的数组来自哪里，但是一旦你的数组中出现了地图，（看起来），循环应写成：

for (var i = 0; i < mapArray.length; i++) {
  var targetMap = mapArray[i];
  targetMap.on('singleclick',function(evt){
    // this event is sent by the map
    targetMap.getView().setCenter(evt.coordinate);
  });
}

希望有所帮助。

Answer 2

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

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);
  });   
}

或者，甚至更好（仅定义处理程序一次）：

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事件绑定到多个映射

2 个答案: