JavaScript中地图标记数组绑定点击事件弹窗异常问题求助

这是典型的闭包作用域陷阱：你用var声明的marker是函数级作用域变量，循环过程中所有点击事件的回调函数都会共享同一个marker引用。当循环结束时，marker指向最后一个创建的标记，所以不管点击哪个标记，都会触发最后一个的弹窗。

下面是三种可行的解决办法：

方法1：用let声明标记变量 #

把var换成let，利用ES6的块级作用域特性，每次循环都会创建一个独立的marker变量，每个回调函数绑定的都是当前循环的标记：

let marker = new atlas.HtmlMarker({
  position: [long, lat],
  text: step,
  popup: new atlas.Popup({
    content: 'test',
    pixelOffset: [0, -30],
    closeButton: false
  })
});

markers.push(marker);

map.events.add('click', marker, () => {
  marker.togglePopup();
});

方法2：通过事件回调参数获取当前标记 #

Azure Maps的事件回调会传入事件对象，其中target属性就是触发事件的标记，直接用它调用togglePopup：

var marker = new atlas.HtmlMarker({
  position: [long, lat],
  text: step,
  popup: new atlas.Popup({
    content: 'test',
    pixelOffset: [0, -30],
    closeButton: false
  })
});

markers.push(marker);

map.events.add('click', marker, (e) => {
  e.target.togglePopup();
});

方法3：用立即执行函数创建独立作用域 #

如果环境不支持ES6，就用IIFE为每个循环迭代创建独立作用域，把当前的marker作为参数传入：

var marker = new atlas.HtmlMarker({
  position: [long, lat],
  text: step,
  popup: new atlas.Popup({
    content: 'test',
    pixelOffset: [0, -30],
    closeButton: false
  })
});

markers.push(marker);

(function(currentMarker) {
  map.events.add('click', currentMarker, () => {
    currentMarker.togglePopup();
  });
})(marker);

内容的提问来源于stack exchange，提问作者Muhammad Usama Alam