在开发中使用到了百度地图进行开发，用于展示企业位置。由于数据量庞大，如果使用marker,将会造成界面卡顿，处理慢的问题。

在查看百度地图API示例是发现了海量点这个东西，还别说对于大数量的点加载起来也很快。于是就使用海量点进行开发。

但是从demo中仅能获取到点击坐标的经度、纬度。无法再获取到其他信息，用户自定义的数据也不行。

于是从万能的网上寻求解决办法，有位朋友的解决方式是获取到经度、纬度之后，通过经度和纬度循环比对，找出自己的用户数据，也算是一种解决方案。但是这种方案的弊端非常明显，首先如果数据量巨大，循环需要花费大量的时间。其次对于位置相同的点，无法区分到底是哪条数据。

后来去官方论坛上，发现好多人也遇到了这个问题，并且暂时还没有解决方案，版主基本的回答是暂时还没有、不可以...

后来在无意的试验中找到了解决方法，废话少说，上代码！

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>加载海量点</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  7. <style type="text/css">
  8. html,body{
  9. margin:0;
  10. width:100%;
  11. height:100%;
  12. background:#ffffff;
  13. }
  14. #map{
  15. width:100%;
  16. height:100%;
  17. }
  18. #panel {
  19. position: absolute;
  20. top:30px;
  21. left:10px;
  22. z-index: 999;
  23. color: #fff;
  24. }
  25. #login{
  26. position:absolute;
  27. width:300px;
  28. height:40px;
  29. left:50%;
  30. top:50%;
  31. margin:-40px 0 0 -150px;
  32. }
  33. #login input[type=password]{
  34. width:200px;
  35. height:30px;
  36. padding:3px;
  37. line-height:30px;
  38. border:1px solid #000;
  39. }
  40. #login input[type=submit]{
  41. width:80px;
  42. height:38px;
  43. display:inline-block;
  44. line-height:38px;
  45. }
  46. </style>
  47. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
  48. <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/data/points-sample-data.js"></script>
  49. </head>
  50. <body>
  51. <div id="map"></div>
  52. <script type="text/javascript">
  53. var map = new BMap.Map("map", {});                        // 创建Map实例
  54. map.centerAndZoom(new BMap.Point(105.000, 38.000), 5);     // 初始化地图,设置中心点坐标和地图级别
  55. map.enableScrollWheelZoom();                        //启用滚轮放大缩小
  56. if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
  57. var points = [];  // 添加海量点数据
  58. for (var i = 0; i < data.data.length; i++) {
  59. var p = new BMap.Point(data.data[i][0], data.data[i][1]);
  60. p.data = "http://blog.csdn.net/wang_song_yan";
  61. points.push(p);
  62. }
  63. var options = {
  64. size: BMAP_POINT_SIZE_SMALL,
  65. shape: BMAP_POINT_SHAPE_STAR,
  66. color: '#d340c3'
  67. }
  68. var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
  69. pointCollection.addEventListener('click', function (e) {
  70. //alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
  71. alert(e.point.data);
  72. });
  73. map.addOverlay(pointCollection);  // 添加Overlay
  74. } else {
  75. alert('请在chrome、safari、IE8+以上浏览器查看本示例');
  76. }
  77. </script>
  78. </body>
  79. </html>

上面的代码源自官方API示例，我在BMap.Point对象里面加了一个data属性，然后在点击事件中获取到BMap.Point对象，然后取出它的data数据。执行效果如下：

其中data属性仅仅是作为测试用，您可以存任何你想存放的数据。

如何使用BMap.Point传递变量、存储数据？的更多相关文章

  1. C语言基础--变量存储细节

      1.变量为什么要有类型? 每种类型占用的内存空间不一样 int 4, char 1 double 8 2.只要定义变量, 系统就会开辟一块存储空间给我们的变量存储数据, 内存寻址是从大到小 3.越 ...

  2. python 基础之变量存储缓存机制与数据驻留小数据池

    一:变量存储的缓存机制 在同一文件(模块)里,变量存储的缓存机制 (仅对python3.x版本负责),那么 --对于Number (int bool float complex) 1.对于整型而言,- ...

  3. sql server 表变量存储临时查询数据

    对于使用sql server 编写存储过程或者类似的sql 查询的时候我们使用表变量进行临时数据的存储,可以方便我们进行下来的数据处理 表变量的使用类似如下: declare @userinfo ta ...

  4. 【转】asp.net中利用session对象传递、共享数据[session用法]

    来自:http://blog.unvs.cn/archives/session-transfer-method.html 下面介绍Asp.net中利用session对象传递.共享数据用法: 1.传递值 ...

  5. asp.net中利用session对象传递、共享数据[session用法]

    下面介绍Asp.net中利用session对象传递.共享数据用法: 1.传递值: 首先定义将一个文本值或单独一个值赋予session,如下: session[“name”]=textbox1.text ...

  6. 在两个ASP.NET页面之间传递变量【转】

    ASP.NET提供了事件驱动编程模型,使开发者简化了应用程序的总体设计,但是这个也造成了它固有的一些问题,例如,在传统的ASP里,我们可以通过使用POST方法很容易地实现页面间传递变量,同样的事情,在 ...

  7. StoryLine3变量存储与跳转后台时的使用

    前言 公司项目原因,接触到storyline3(后面简称SL)课件制作工具,类似ppt,但是又多了互动.交互,且页面元素可添加触发器,触发器中可执行js代码. 1.官方教程 在SL中,会有“了解详情. ...

  8. 数据在内存中的存储方式( Big Endian和Little Endian的区别 )（x86系列则采用little endian方式存储数据）

    https://www.cnblogs.com/renyuan/archive/2013/05/26/3099766.html 1．故事的起源 “endian”这个词出自<格列佛游记>.小 ...

  9. JavaScript传递变量：值传递？引用传递？

    今天在看 seajs-2.2.1/src/util-events.js源码,里面有段代码不是很理解: var events = data.events = {} // Bind event seajs ...

随机推荐

  1. AC日记——租用游艇 洛谷 P1359

    题目描述 长江游艇俱乐部在长江上设置了n 个游艇出租站1,2,…,n.游客可在这些游艇出租站租用游艇,并在下游的任何一个游艇出租站归还游艇.游艇出租站i 到游艇出租站j 之间的租金为r(i,j),1& ...

  2. Linux 系统的常用命令之 rm ，rm -rf , rm -f 以及rm 命令的其他参数命令

    1.rm -rf * 删除当前目录下的所有文件,这个命令很危险,应避免使用. 所删除的文件,一般都不能恢复! 2.rm -f 其中的,f参数 (f --force ) 忽略不存在的文件,不显示任何信息 ...

  3. 关于几种UI框架简单总结

    最近两年多的时间先后做过几款终端程序,UI框架从MFC转向过WxWidgets,之后再转向Qt.三种框架精通远谈不上,用起来还是没什么问题. 简单聊聊三种框架的优缺点. 1.MFC 似乎作为一种饱受批 ...

  4. C/C++中static关键字作用总结 && 指针与引用的比较

    static作用: 常规答案: 1. 全局变量的隐藏:2. 函数体内记忆功能:3.类所有实例共享,static函数不接受this指针,只能访问static成员变量. 拓展:1.全局变量的隐藏,因为在其 ...

  5. BUPT复试专题—统计时间间隔(2013计院)

    题目描述 给出两个时间(24小时制),求第一个时间至少要经过多久才能到达第二个时间.给出的时间一定满足的形式,其中x和y分别代表小时和分钟.0≤x<24,0≤y<60. 输入格式 第一行为 ...

  6. Zabbix监控Mongo

    安装Zabbix-agent # groupadd zabbix # useradd -g zabbix zabbix # yum -y install gcc mysql-community-dev ...

  7. 微信小程序 开发环境配置

    1.注册小程序 (1)微信公众平台:https://mp.weixin.qq.com/(2)立即注册 (3)流程 (4)小程序注册 (5)填写相关信息,并去邮箱激活.这样小程序的账号就注册完成了. 2 ...

  8. IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世

    https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...

  9. jQuery Ajax Post Data Example

    http://www.formget.com/jquery-post-data/ jQuery Ajax Post Data Example Fugo Of FormGet jQuery $.post ...

  10. c程序设计语言第一章2

    练习1.13编写一个程序,打印输入中单词长度的直方图.水平方向的直方图比较容易绘制,垂直方向的直方图则要困难些 #include <stdio.h> #include <stdlib ...