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

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

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

  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]的内容了。
这样虽然解决了问题,但是每添加一个点都会创建一个匿名函数,内存泄漏可能会是潜在隐患。
接下去, 我们就可以自由的在地图上标注点并显示对应的信息了!

时间: 2024-12-22 10:16:29

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

【百度地图API】如何快速创建带有标注的地图?——快速创建地图工具+如何标注商家

原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. 不要犹豫了,就使用快速创建地图工具吧! -------------------------------------------------------------------------------------- 如何快速创建地图? 一.转入百度提供的快速创建地图工具页面:http://openap

异步-js 百度地图怎么获取有文字标签的标注

问题描述 js 百度地图怎么获取有文字标签的标注 刚接触百度地图,想请教各位,我需要实现一个多个车辆运行轨迹跟踪的功能,第一次标注车辆起始位置,然后定时获取地图上所有标注车辆信息进行异步数据查询,让车辆达到能实时运行的效果,如图初始是3个标注,所以可以执行,第二次因为走过的轨迹也是无数标注(红色路线)组成,但是却没有标注标签信息,我想请问各位怎么能只获取地图上带有标注信息(车辆标注)的标注,小弟在此先谢谢了!

如何利用【百度地图API】,制作房产酒店地图?(中)——使用右侧列表打开信息窗口

原文:如何利用[百度地图API],制作房产酒店地图?(中)--使用右侧列表打开信息窗口 摘要: 很多房产网.旅游酒店网上,都有一个列表,鼠标经过列表上的数据时,地图上就会打开相应的信息窗口. 如何实现这一功能呢? 快来学习吧. ----------------------------------------------------------------------------------------------- 一.制作列表 接着上一篇文章来讲,我们已经拥有了一张能显示自定义标注,和信息窗口

百度地图api怎么获得道路路口、交叉口等信息

问题描述 百度地图api怎么获得道路路口.交叉口等信息 一直没看到百度地图API提供这些功能,没法得到道路的具体信息,但是在高德地图中 见过对应的接口,想知道百度地图该怎么办,谢谢! 解决方案 http://zhidao.baidu.com/link?url=e_2RiyEJZf3ZGUn6ES2eO23C7jY27criiUOKlFbYi2in7o_ba53z8wGjmilB9xzW4k1XZDAxz6zX280dOH2W18UWCLfOl1_Wenan6l9Wtpq

【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注

原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo,酒店logo等) 如何在标注上显示信息窗口,以及添加文字标签等其他覆盖物: 最后,介绍一个获取坐标的给力工具. ---------------------------------------------------------------------------------------------------

百度地图排名优化及标注

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在前几个星期有一个老朋友问我为什么他竞争对手的百度地图排名上多个几个商户名子,我看了一下原来是百度地图已经改版为百度地图本地商户中心并免费开放标注位置服务.然后我就去了解了一下标注方式,下面就为大家介绍一下. 百度地图标注,是专门服务于本地商户的一种新型营销模式,你可以在百度地图自主管理您的详情页面,丰富营业信息,让客户全方位了解您并找到你.

百度地图API的使用

好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是要整理记录下来的好,多个备份也好.   -------------------------------------------- 下面正题,最近公司项目用百度地图API较多.后面还有使用高德地图API,后续整理记录上.   1.初始化地图,并设置地图中心点 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new B

百度地图API之本地搜索与范围搜索_javascript技巧

地图服务是指可以提供数据信息的接口,比如说本地搜索/路线规划等,下面小编给大家整理下百度地图API之本地搜索和范围搜索,具体请看下文. 地图服务概述 地图服务是指那些提供数据信息的接口,比如本地搜索.路线规划等等.百度地图API提供的服务有: LocalSearch:本地搜索,提供某一特定地区的位置搜索服务,比如在北京市搜索"公园".TransitRoute:公交导航,提供某一特定地区的公交出行方案的搜索服务.DrivingRoute:驾车导航,提供驾车出行方案的搜索服务.Walkin

百度地图api-百度地图如何只删除或隐藏覆盖物的标签文字

问题描述 百度地图如何只删除或隐藏覆盖物的标签文字 百度地图如何只删除或隐藏覆盖物的标签文字,不删除覆盖物,只删除标签文字 比如这张图片里面有个覆盖物,针对这个覆盖物加了个文字框,要把建京大厦这个文字框隐藏了 解决方案 可以加QQ说 826180082 解决方案二: 百度地图中的覆盖物百度地图覆盖物 解决方案三: // 将底图标注设置为隐藏,方法如下: mBaiduMap.showMapPoi(false) 解决方案四: 不知是不是要这种效果 解决方案五: 比如这张图片里面有个覆盖物,针对这个覆