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

    D(树上倍增) 题意: 刚开始有一个点1,权值为0. 接下来有q个操作,每个操作有两种: 1 R W:新加一个点,这个点的权值为W,这个点的父亲是R 2 R X:在从点R到1的路径上,取出从R开始的不 ...

  2. Spring 详解（一）------- AOP前序

    目录 1. AOP 简介 2. 示例需求 3. 解决方法一:使用静态代理 4. 解决方法二:使用动态代理 1. AOP 简介 ​ AOP(Aspect Oriented Programming),通常 ...

  3. Java并发编程关键字synchronized的总结

    一.对synchronized的了解 synchronized关键字解决的是多个线程之间访问资源的同步性,synchronized关键字可以保证被它修饰的方法或者代码块在任意时刻只能有一个线程执行. ...

  4. sql 添加自定义排序

    Mysql : SELECT (@i:=@i+1) AS ind ,字段 FROM 表名 别名, (SELECT @i:=0) t WHERE `IsDeleted` = 0; Oracle: 本就有 ...

  5. iOS中创建自定义的圆角按钮

    iOS中很多时候都需要用到指定风格的圆角按钮,尽管UIButton提供了一个方式创建圆角按钮: + (id)buttonWithType:(UIButtonType)buttonType;//指定bu ...

  6. 【java】java base64编码与解码

    参考地址:http://blog.csdn.net/zhou_kapenter/article/details/62890262 要求:JDK1.8+ 使用java原生工具类即可实现 [这里展示字符串 ...

  7. iOS 合并.a文件，制作通用静态库

    lipo  -create  SQY/iOS/iphoneos/libGamePlusAPI.a  SQY/iOS/iphonesimulator/libGamePlusAPI.a  - output ...

  8. 安卓APK瘦身

    之前打包的时候直接就用eclipse或者android studio直接生成签名文件,并没有关心大小问题,近期有人问我有没有对APK进行瘦身.对这方面内容一致没有关注过,今天试用了各种方式把项目签名a ...

  9. 走入asp.net mvc不归路:[6]linq常见用法

    asp.net mvc结合linq,先不说性能问题,对于增删查改的操作还是相当方便的.以下我们就来介绍一下linq在asp.net mvc的Controller中的常见用法. 1 首先来看看整个数据表 ...

  10. 【转载】VS工具使用——代码生成函数关系图

    小引:        在上篇文章<VS工具使用--代码图>中,我向大家介绍了我对工具"代码图"的发现和认识.真是感觉当自己的眼睛不再被蒙蔽的时候,会发现整个世界的美好. ...