在开发中使用到了百度地图进行开发，用于展示企业位置。由于数据量庞大，如果使用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. GitHub中watch、star、fork的作用

    star 的作用是收藏,目的是方便以后查找. watch 的作用是关注,目的是等作者更新的时候,你可以收到通知. fork 的作用是参与,目的是你增加新的内容,然后 Pull Request,把你的修 ...

  2. java 常用的解析工具

    这里介绍两种 java 解析工具. 第一种:java 解析 html 工具 jsoup 第二种: java 解析 XML 工具 Dom4j jsoup jsoup是一个用于处理真实HTML的Java库 ...

  3. Spring在Bean中注入集合

    以下内容引用自http://wiki.jikexueyuan.com/project/spring/injecting-collection.html: 如果你想传递多个值,如Java Collect ...

  4. iOS App 项目：会员卡管理系统设计方案

    1.需求描写叙述 店主须要管理自己的会员信息和充值卡信息以及消费纪录 店主觉得购买电脑和外设成本太高,并且店面没有地方容纳这些设备 店主希望通过手机来完毕这些功能.但尽量不产生流量.对网络要求较低 店 ...

  5. 怎样使用1M的内存排序100万个8位数

    今天看到这篇文章.颇为震撼.感叹算法之"神通". 借助于合适的算法能够完毕看似不可能的事情. 最早这个问题是在Stack Overflow站点上面给出的(Sorting numbe ...

  6. viewcontroller生命周期知识要点

    一 viewcontroller执行方法的主要顺序为: init—>loadView—>viewDidLoad—>viewWillApper—>viewDidApper—> ...

  7. Network Booting

    http://en.wikipedia.org/wiki/Network_booting Network booting Network booting is the process of booti ...

  8. javascript参数arguments对象

    ECMAScript函数的参数与大多树其他语言中函数的参数有所不同.ECMAScript函数不介意传递进来多少个参数,也不在乎传进来参数是什么类型.函数体是通过arguments对象来访问参数数组.a ...

  9. JAVA WEB学习笔记(三):简单的基于Tomcat的Web页面

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  10. strsep strpbrk

    #include <stdio.h> #include <string.h> int main(void) { char s[] = "aa,bb,cc.11,22, ...