地图开发添加标注物

简介: 最近几年在搞地图方面的开发,主要是循环为坐标添加标注并为标注添加弹出信息窗口,起初我的代码如下: [javascript] view plaincopy var map = new BMap.Map("Mapcontainer");                var JsonObj = eval(JsonStr);                if (J

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

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

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

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

[javascript] view plain copy
  1. var map = new BMap.Map("Mapcontainer");  
  2.               var JsonObj = eval(JsonStr);  
  3.               if (JsonObj != null) {  
  4.                   for (var i = 0; i < JsonObj.length; i++) {  
  5.                      (function (x) {  
  6.                          var point = new BMap.Point(JsonObj[x].Visit_GPS_Longitude, JsonObj[x].Visit_GPS_Latitude);    // 创建点坐标  
  7.                          map.centerAndZoom(point, 13);  
  8.                          var marker = new BMap.Marker(point);  
  9.                          var opts = {  
  10.                              width: 250,     // 信息窗口宽度  
  11.                              height: 100,     // 信息窗口高度  
  12.                              title: '<span style="font-size:15px;color:#0A8021">' + JsonObj[x].CustomerName + '</span>'   // 信息窗口标题  
  13.                          }  
  14.                          //marker.setAnimation(BMAP_ANIMATION_BOUNCE);  
  15.                          var content = "进店时间 " + JsonObj[x].VisitBeginTime + "<br/>离店时间 " + JsonObj[x].VisitEndTime;  
  16.                          var info_Window = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象  
  17.                          marker.addEventListener("click"function () {  
  18.                              this.openInfoWindow(info_Window);  
  19.                          });  
  20.                          map.addOverlay(marker);  
  21.                      })(i);  
  22.                   }   
  23.                   map.addControl(new BMap.NavigationControl());    

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

但是传到闭包里面的值已经被保留,也就可以顺利拿到应该取到的address[i]的内容了。
这样虽然解决了问题,但是每添加一个点都会创建一个匿名函数,内存泄漏可能会是潜在隐患。
接下去, 我们就可以自由的在地图上标注点并显示对应的信息了!
目录
相关文章
|
数据可视化 数据挖掘 API
数据可视化秘籍:用Matplotlib和Seaborn创建洞察力图表
【4月更文挑战第12天】本文介绍了Python中的数据可视化库Matplotlib和Seaborn,它们是数据分析中的强大工具。Matplotlib是基础绘图库,提供面向对象的API,可绘制多种图表。Seaborn基于Matplotlib,提供更美观和易用的界面,支持复杂的数据可视化技术。文中展示了如何使用这两个库创建线图、散点图、条形图、饼图和直方图,以帮助理解数据并展示发现。
255 0
|
数据采集 存储 数据可视化
【python】python二手房数据抓取分析可视化(源码)【独一无二】
【python】python二手房数据抓取分析可视化(源码)【独一无二】
【python】python二手房数据抓取分析可视化(源码)【独一无二】
|
10月前
|
安全 API
鸿蒙开发:实现AOP代码插桩能力
正确的运用AOP,可以提升代码的模块化、复用性、可维护性和灵活性,同时降低了耦合度,使系统更易于扩展和维护。
245 13
鸿蒙开发:实现AOP代码插桩能力
|
移动开发 小程序 Java
良心分享:基于Java+SpringBoot+Netty+WebSocket+Uniapp轻松搭建在线互动问答程序
本文将详细介绍如何基于你自己的开源项目搭建一个在线互动问答程序,包括微信小程序和H5网页版。 该项目服务端主要使用了Java + Spring Boot + Netty + WebSocket等技术栈,聊天客户端使用的是UniApp来轻松搭建微信小程序和H5网页端。
325 1
|
应用服务中间件 开发工具
|
网络协议 Linux 网络安全
集中配置管理工具puppet安装使用方法详解
Puppet是开源的基于Ruby的一种Linux、Unix平台的集中配置管理工具,puppet是一个C/S结构, 当然,这里的C可以有很多,因此,也可以说是一个星型结构. puppet使用自有的puppet描述语言,可管理配置文件、用户、cron任务、软件包、系统服务等。
1375 0
【技术贴】MyEclipse6.5注册码
下面都是MyEclipse6.5注册码loveyLR8ZC-855550-69545856608357821AdministratorNLR8ZC-855550-69545856815928409baiduoLR8ZC-855550-6954585759478464eclipserLR8ZC-...
863 0
|
2天前
|
云安全 人工智能
2025,阿里云安全的“年度报告”
拥抱AI时代,阿里云安全为你护航~
1439 1
|
9天前
|
云安全 人工智能 算法
以“AI对抗AI”,阿里云验证码进入2.0时代
三层立体防护,用大模型打赢人机攻防战
1417 10

热门文章

最新文章