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

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

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

  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-13 18:00:11

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

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

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

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

//设备在地图上进行标注    function GetGateInfo(vSID, vMap) { var icon = "../Content/easyui/themes/icons/gate.png";        var myIcon = new BMap.Icon(icon, new BMap.Size(32, 32), {            offset: new BMap.Size(32, 32)        }); $.ajax({            typ

js版本百度地图创建自定义覆盖物,点击显示对应信息框

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margi

百度地图 移动坐标显示该坐标周围对应的信息

BMKCoordinateRegion region ;//表示范围的结构体 region.center = coordinate;//中心点 region.span.latitudeDelta = 0.1;//经度范围(设置为0.1表示显示范围为0.2的纬度范围) region.span.longitudeDelta = 0.1;//纬度范围 [_mapView setRegion:region animated:YES]; 在开发百度地图的时候会有这样的需求,需要设置地图显示在某个地方,虽然

Android 百度地图 SDK v3.0.0 (三) 添加覆盖物Marker与InfoWindow的使用

所需的权限: ? <!-- 这个权限用于进行网络定位 --> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" > </uses-permission> <!-- 这个权限用于访问GPS定位 --> <uses-permission android:name="android.permission.ACCESS_FINE_LO

百度地图的反地址解析(通过经纬度查询地址信息)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript" src="./jquery-1.4.2.min.js"></script> <!-- 这里的引用有ak和没有ak的区别暂时还没有弄清楚

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

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

Android百度地图 - 在地图上标注已知GPS纬度经度值的一个或一组覆盖物 - OPEN 开发经验库 - 360安全浏览器 8.1

首页   代码   文档   问答   资讯   经验   GitHub日报 登录   注册 www.open-open.com/libOPEN经验 投稿 全部经验分类  Android IOS JavaScript HTML5 CSS jQuery Python PHP NodeJS Java Spring MySQL MongoDB Redis NOSQL Vim C++ C# JSON Ruby Linux Nginx Docker 所有分类  >  开发语言与工具  >  移动开发  

百度地图简单使用——添加折线,圆形等(html,js)

地图覆盖物概述 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物.如标注.矢量图形元素(包括:折线和多边形和圆).信息窗口等.覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动. 地图API提供了如下几种覆盖物: Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法. Marker:标注表示地图上的点,可自定义标注的图标. Label:表示地图上的文本标注,您可以自定义标注的文本内容. Polyline:表示地图上的折线. Polygon:表示地图上的多边形.多边形类似于