调用百度地图API时,在for循环中使用new BMap.InfoWindow(),只显示最后一个的问题

在使用new BMap.InfoWindow()时,添加多个标记,可能在循环中添加addEventListener监听事件,但是最后发现只有最后一个监听管用,解决方法如下:

    map() {
      let t = this;
      // 百度地图API功能
      var map = new BMapGL.Map("map");
      var point = new BMapGL.Point(112.541526, 37.934578);
      map.centerAndZoom(point, 10);

      var myIcon = new BMapGL.Icon(
        require("../assets/images/location.png"),
        new BMapGL.Size(48, 48)
      );
      var markerList = []; //标记集合
      for (var i in t.sourceList) {
        markerList.push(
            new BMapGL.Marker(
              new BMapGL.Point(t.sourceList[i].lng, t.sourceList[i].lat),
              {
                icon: myIcon,
              }
            )
          );
        map.addOverlay(markerList[i]);
        addInfoWinview(i);
      }
      function addInfoWinview(i) {
        markerList[i].addEventListener("click", function () {
          map.openInfoWindow(
            new BMapGL.InfoWindow(
              `公司:${t.sourceList[i].company}<br>
              平台位置:<br>经度:${t.sourceList[i].lng},纬度:${t.sourceList[i].lng}`,
              {
                width: 240,
                height: 150,
                title: t.sourceList[i].name,
              }
            ),
            new BMapGL.Point(t.sourceList[i].lng, t.sourceList[i].lng)
          );
        });
      }

      var marker = new BMapGL.Marker(point);
      map.enableScrollWheelZoom(true);
      map.addControl(new BMapGL.ScaleControl()); //比例尺
      map.addControl(new BMapGL.NavigationControl3D());
      map.addOverlay(marker);
    },

原因

百度地图的openInfoWindow是延迟方法,如果不使用闭包的话,循环完成后值会被覆盖掉后,才执行openInfoWindow,所有都是最后一次的监听方法管用。

拓展

//执行后全是5
for(var i=0;i<5;i++){
		setTimeout(()=>{
			console.log(i)
		},1000)
	}
//修改后
//输出 0、1、2、3、4
for (var i=0;i<5;i++) {
    (function (x) {
    setTimeout(function () {
        console.log(x)
    },500)
    })(i);
}

输出为5的原因是因为js是单线程的,定时任务会放到一边等待执行,而for循环立即执行,同时因为i是var定义的,栈中维护的是同一个变量,等定时任务执行时,for循环已经执行完,i变为了5
解决方法:第一种是将var改为let,因为let是局部变量,有暂时性死区,所以相当于console.log(i)中的i是5个不相同的对象。第二种是添加闭包

拓展

let/const的暂时性死区

ES6的解释:当程序的控制流程在新的作用域( module function 或 block 作用域)进行实例化时,在此作用域中用let/const声明的变量会先在作用域中被创建出来,但因此时还未进行词法绑定,所以是不能被访问的,如果访问就会抛出错误。因此,在这运行流程进入作用域创建变量,到变量可以被访问之间的这一段时间,就称之为暂时死区。