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

最新推荐文章于 2023-09-11 16:02:47 发布

新时代_打工人

最新推荐文章于 2023-09-11 16:02:47 发布

阅读量833

点赞数

分类专栏：其它文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_46361270/article/details/130134920

版权

其它专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在使用BMap.InfoWindow创建多个地图标记并添加点击事件时，由于JavaScript的作用域问题，会导致最后只有一个监听事件有效。解决方法是通过闭包保存每个标记的索引，确保每个标记的点击事件能打开对应的信息窗口。同时，文章通过setTimeout的例子解释了JavaScript的单线程特性和变量作用域的概念，强调了let的局部作用域和暂时性死区特性。

摘要由CSDN通过智能技术生成

在使用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声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。