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