百度地图循环添加标注,并循环为标注添加信息窗口问题解决

最近几年在搞地图方面的开发,主要是循环为坐标添加标注并为标注添加弹出信息窗口,起初我的代码如下:

  var map = new BMap.Map("Mapcontainer");
                var JsonObj = eval(JsonStr);
                if (JsonObj != null) {
                    for (var i = 0; i < JsonObj.length; i++) {
                           var point = new BMap.Point(JsonObj[i].Visit_GPS_Longitude, JsonObj[i].Visit_GPS_Latitude);    // 创建点坐标
                           map.centerAndZoom(point, 13);
                           var marker = new BMap.Marker(point);
                           var opts = {
                               width: 250,     // 信息窗口宽度
                               height: 100,     // 信息窗口高度
                               title: '<span style="font-size:15px;color:#0A8021">' + JsonObj[i].CustomerName + '</span>'   // 信息窗口标题
                           }
                           //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                           var content = "进店时间 " + JsonObj[i].VisitBeginTime + "<br/>离店时间 " + JsonObj[i].VisitEndTime;
                           var info_Window = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                           marker.addEventListener("click", function () {
                               this.openInfoWindow(info_Window);
                           });
                           map.addOverlay(marker); 
                    } 
                    map.addControl(new BMap.NavigationControl()); 

这样子确实能添加标注,也弹出信息窗口,但是问题来了!弹出 的信息窗口没有变化,也就是说本来不同的标注上弹出 的信息窗口应该是不一样的,可以不知道怎么回事

弹出的信息窗口一直是最后的那个信息窗口!折腾了好久,最后终于解决了,具体的代码如下:

  var map = new BMap.Map("Mapcontainer");
                var JsonObj = eval(JsonStr);
                if (JsonObj != null) {
                    for (var i = 0; i < JsonObj.length; i++) {
                       (function (x) {
                           var point = new BMap.Point(JsonObj[x].Visit_GPS_Longitude, JsonObj[x].Visit_GPS_Latitude);    // 创建点坐标
                           map.centerAndZoom(point, 13);
                           var marker = new BMap.Marker(point);
                           var opts = {
                               width: 250,     // 信息窗口宽度
                               height: 100,     // 信息窗口高度
                               title: '<span style="font-size:15px;color:#0A8021">' + JsonObj[x].CustomerName + '</span>'   // 信息窗口标题
                           }
                           //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                           var content = "进店时间 " + JsonObj[x].VisitBeginTime + "<br/>离店时间 " + JsonObj[x].VisitEndTime;
                           var info_Window = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                           marker.addEventListener("click", function () {
                               this.openInfoWindow(info_Window);
                           });
                           map.addOverlay(marker);
                       })(i);
                    } 
                    map.addControl(new BMap.NavigationControl());  

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

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


  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 25
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值