在开发中使用到了百度地图进行开发，用于展示企业位置。由于数据量庞大，如果使用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. Perl语言--一些关于赋值、引用的东西

    引用详解 一.定义引用有两种: 1.用斜线“\” 2.匿名引用 1.用反斜线的引用:数组.哈希.标量 数组的引用 my @array = (1,2,3); my $aref = \@array; 哈希 ...

  2. 快速掌握RabbitMQ(三)——消息确认、持久化、优先级的C#实现

    1 消息确认 在一些场合,如转账.付费时每一条消息都必须保证成功的被处理.AMQP是金融级的消息队列协议,有很高的可靠性,这里介绍在使用RabbitMQ时怎么保证消息被成功处理的.消息确认可以分为两种 ...

  3. shell高级-----初识sed和gawk

    sed编辑器 sed说明 sed是Linux下一款功能强大的非交互流式文本编辑器,可以对文本文件进行增.删.改.查等操作,支持按行.按字段.按正则匹配文本内容,灵活方便,特别适合于大文件的编辑. 替换 ...

  4. json常见用法-loads、jumps、load、jump

    这一篇博客的目的主要是想说明一个问题:干什么事情要抓住重点,不要力求完美,不要追求那种'大而全'的办事方式,因为时间是有限的,而客观事物(这里主要指技术方面的知识)是无限的,so,anyway! 1. ...

  5. 前端微服务-面向web平台级应用的设计

    从去年开始,前端领域就出现了一个‘微应用’的名词,说的是前端架构的一种设计思路,业内都把它和后端的微服务进行类比,当时忙于公司的项目.没有静下心来好好了解,现在项目结束,再加上最近看的几篇关于前端微服 ...

  6. C++与Java语法上的不同

    最近学习算法和刷题基本都是用C++写的程序,在这个过程中,发现C++和Java在语法上有很多相同点,但也有很多不同点,而这些不同点对于已经掌握Java的程序员来说,理解C++代码可能会有些吃力甚至困难 ...

  7. 【Discuz】ucenter通讯失败与Discuz的头像无法显示

    假设是Discuz论坛的一些小样式图片.仅仅须要升级一下Discuz论坛的论坛或者,直接把整个网站的css的首域名替换一下.比方将127.0.0.1:8080/..开头的东西全改成127.0.0.1: ...

  8. poj 1659 Frogs&#39; Neighborhood 度序列可图化 贪心

    题意: 对一个无向图给出一个度序列,问他是否可简单图化. 分析: 依据Havel定理,直接贪心就可以. 代码: //poj 1659 //sep9 #include <iostream> ...

  9. ADO.NET EF 4.2 中的查询缓存（避免查询缓存）

    在WinForm系统中遇到了个问题,Form1是查询窗口,根据条件查询出所有数据,双击列表后创建弹出Form2窗口编辑单个记录,但编辑后保存后,在Form2中查询到的还是旧的数据,实际数据库中已经更新 ...

  10. 【转载】细聊分布式ID生成方法

    一.需求缘起 几乎所有的业务系统,都有生成一个记录标识的需求,例如: (1)消息标识:message-id (2)订单标识:order-id (3)帖子标识:tiezi-id 这个记录标识往往就是数据 ...