百度地图API 循环添加信息窗口问题

百度地图API循环添加信息窗口,会出现所有消息只显示在第一个窗口的位置的问题.并且信息内容相同

解决方法1

转载自

https://blog.csdn.net/zz_mm/article/details/7600901

function initBaiDuMap(d) {
        var markers = [];
        for (var i = 0; i < d.length; ++i) {
            if (null == d[i].LBSInfo || '' == d[i].LBSInfo)
                continue;
            (function (x) {
                var lbsInfo = JSON.parse(d[x].LBSInfo);
                var gcPoint = wgs84togcj02(parseFloat(lbsInfo.lon), parseFloat(lbsInfo.lat));
                var bPoint = gcj02tobd09(gcPoint[0], gcPoint[1]);
                var targetPoint = new BMapGL.Point(bPoint[0], bPoint[1]);
                var markerTarget = new BMapGL.Marker(targetPoint);
                map.addOverlay(markerTarget);
                //基站返回的半径有误差,*2.5
                var circle = new BMapGL.Circle(targetPoint, lbsInfo.radius * 2.5, {
                    strokeColor: 'blue',
                    strokeWeight: 1,
                    strokeOpacity: 0,
                    fillColor: 'blue',
                    fillOpacity: 0.1
                });
                map.addOverlay(circle);
                markers.push(markerTarget);

                var msg_info = "编号：" + d[x].MachineSN + '<br/>' + '名称：' + d[x].MachineName + '<br/>更新时间：' + d[x].LastConnectTime;
                var opts = {
                    width: 240,     // 信息窗口宽度
                    height: 100,     // 信息窗口高度
                    title: 'LTE设备编号:' + d[x].DevLTE_SN, // 信息窗口标题
                    message: '设备信息'
                };
                var infoWindow = new BMapGL.InfoWindow(msg_info, opts);  // 创建信息窗口对象

                markerTarget.addEventListener("click", function () {
                    map.openInfoWindow(infoWindow, targetPoint); //开启信息窗口
                });
            })(i);          
        }

        var centerPoint = new BMapGL.Point(121.46158672149517, 31.322417370168107);
        map.centerAndZoom(centerPoint, 7);                           // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //map.setHeading(60);   //设置地图旋转角度
        //map.setTilt(0);       //设置地图的倾斜角度
    }

 

同样是一个循环，但是在循环中使用了一个匿名函数，从而造成一个闭包将 i 的值锁定在里面，这样外部的值已经变化，

但是传到闭包里面的值已经被保留，也就可以顺利拿到应该取到的address[i]的内容了。
这样虽然解决了问题，但是每添加一个点都会创建一个匿名函数，内存泄漏可能会是潜在隐患。
接下去， 我们就可以自由的在地图上标注点并显示对应的信息了!

 

方法2 推荐

把var换成let

function initBaiDuMap(d) {
        var markers = [];
        for (var i = 0; i < d.length; ++i) {
            if (null == d[i].LBSInfo || '' == d[i].LBSInfo)
                continue;           
            if (null == d[i].LBSInfo || '' == d[i].LBSInfo)
                continue;
            var lbsInfo = JSON.parse(d[i].LBSInfo);
            var gcPoint = wgs84togcj02(parseFloat(lbsInfo.lon), parseFloat(lbsInfo.lat));
            var bPoint = gcj02tobd09(gcPoint[0], gcPoint[1]);
            let targetPoint = new BMapGL.Point(bPoint[0], bPoint[1]);
            let markerTarget = new BMapGL.Marker(targetPoint);
            map.addOverlay(markerTarget);
            //基站返回的半径有误差,*2.5
            var circle = new BMapGL.Circle(targetPoint, lbsInfo.radius * 2.5, {
                strokeColor: 'blue',
                strokeWeight: 1,
                strokeOpacity: 0,
                fillColor: 'blue',
                fillOpacity: 0.1
            });
            map.addOverlay(circle);
            markers.push(markerTarget);

            let msg_info = "编号：" + d[i].MachineSN + '<br/>' + '名称：' + d[i].MachineName + '<br/>更新时间：' + d[i].LastConnectTime;
            let opts = {
                width: 240,     // 信息窗口宽度
                height: 100,     // 信息窗口高度
                title: 'LTE设备编号:' + d[i].DevLTE_SN, // 信息窗口标题
                message: '设备信息'
            };
            let infoWindow = new BMapGL.InfoWindow(msg_info, opts);  // 创建信息窗口对象

            markerTarget.addEventListener("click", function () {
                map.openInfoWindow(infoWindow, targetPoint); //开启信息窗口
            });
        }

        var centerPoint = new BMapGL.Point(121.4617, 32.32247);
        map.centerAndZoom(centerPoint, 7);                           // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //map.setHeading(60);   //设置地图旋转角度
        //map.setTilt(0);       //设置地图的倾斜角度
    }

var跟let区别

1 var是函数作用域，let是块作用域。

在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的

而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的，所以for循环推荐用let

2、let不能在定义之前访问该变量，但是var可以。

let必须先声明，在使用。而var先使用后声明也行，只不过直接使用但没有定义的时候，其值是undefined。var有一个变量提升的过程，当整个函数作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认为初始化一个undefined

3、let不能被重新定义，但是var是可以的