即使使用匿名函数或绑定(bind),注册 OpenLayers 事件时 JavaScript 闭包也会触发循环内的所有内容

标签 javascript closures openlayers openstreetmap

我有以下代码,我试图向 OpenStreetMaps 添加一些标记,并且 onClick 它们会触发自己的弹出窗口。 lonLats 是一个数组,其中包含具有 lon、lat 和 text 属性的对象。代码大致如下。

<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
var map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var projection = new OpenLayers.Projection("EPSG:4326"); // transform from WGS 1984
var mapProjection = map.getProjectionObject(); // // to Spherical Mercator Projection
var zoom=16;

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
map.setCenter (new OpenLayers.LonLat(lonLats[0].lon, lonLats[1].lat).transform(projection, mapProjection), zoom);
lonLats.forEach(function(el){
    var lonLat = new OpenLayers.LonLat(el.lon, el.lat).transform(projection, mapProjection);

    var marker = new OpenLayers.Marker(lonLat);
    markers.addMarker(marker);

    var popup = new OpenLayers.Popup.FramedCloud("",
                       marker.lonlat,
                       new OpenLayers.Size(200, 200),
                       el.text,
                       null, true);
    (function(p, m){
            map.addPopup(p);
            p.hide();
            map.events.register('click', m, (function(){
                this.show();
            }).bind(p, null));
    })(popup, marker);
  });

</script>

所以基本上,当我单击其中一个标记时,所有弹出窗口都会变得可见。这看起来像是经典的 JavaScript 闭包陷阱,但我应该如何注册 OpenLayers 事件,以便它只触发我正在单击的一个标记?

最佳答案

问题相当简单,我只需要将事件注册到标记即可。不知道我是如何从示例中混淆的,可能会感到困惑,因为标记本身是作为参数给出的。

m.events.register('click', m, (function(){
    this.show();
}).bind(p, null));

关于即使使用匿名函数或绑定(bind),注册 OpenLayers 事件时 JavaScript 闭包也会触发循环内的所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37244174/

相关文章:

javascript - 从变量调用的 js array.length 不起作用,为什么?

javascript - 从 onBlur 事件中获取新聚焦的元素(如果有的话)。

javascript - 在 Javascript 中单击按钮时输入不会改变

character-encoding - Sencha Touch、OpenLayers、GeoServer : Wrong encoding on devices using Android 2. 2

javascript - 在淡入淡出之间淡入/淡出

javascript - 在javascript中动态调用本地函数

ios - 将采用转义闭包的闭包传递给接受该类型闭包的函数的问题

Javascript 闭包返回未定义

javascript - 动态更改输入 svg 图标的位置

gis - 如何在 OpenLayers 4 上添加点击事件?