在开发中使用到了百度地图进行开发，用于展示企业位置。由于数据量庞大，如果使用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. Poi写文件时报java.io.IOException: Read error

    使用POI报表时不停的报java.io.IOException: Read error,看网上是说关闭了InputStream所导致的,由于我的InputStream是读取和写入都是用的同一个,所以就 ...

  2. JavaScript 实现格式化字符串函数String.format （解决引号嵌套转义符问题）

    在js开发中,我们可能会遇到这样一个问题 当需要通过js动态插入html标签的时候 特别是当遇到大量的变量拼接.引号层层嵌套的情况,会出现转义字符问题,经常出错 我们来看个例子 <!DOCTYP ...

  3. CODEVS 1245 最小的N个和 堆+排序

    原题链接 http://codevs.cn/problem/1245/ 题目描述 Description 有两个长度为 N 的序列 A 和 B,在 A 和 B 中各任取一个数可以得到 N^2 个和,求 ...

  4. Codeforces 540 D Bad Luck Island

    Discription The Bad Luck Island is inhabited by three kinds of species: r rocks, s scissors andp pap ...

  5. solr 简要笔记

    创建搜索1 创建directory 2.分词器 analyzer 3indexwriter writer dic an 4.document doc.add writer.adddocument(do ...

  6. Nginx的Web管理界面收集

    Nginx实在是太强大了!灰度发布.金丝雀发布.负载均衡就只需要简单的几行配置就可以实现,这些特性嗾使微软无法比拟的. 原来Nginx除了使用ngx_http_stub_status_module模块 ...

  7. [vxlan] 二 什么是VXLAN

    VXLAN是一种mac in UDP的技术.简单讲就是传统的二层帧被封装到了UDP的package中.通过UDP的IP网络发送到目的地然后再解封装. VXLAN 跟VLAN对比,最重要的一个概念就是V ...

  8. CAS 跨域原理

    http://www.blogjava.net/rain1102/articles/227739.html CAS(Central Authentication Service) 是 Yale 大学发 ...

  9. Multi-company rules

    Object Name Domain 说明 Point of Sale Point Of Sale Order [('company_id', '=', user.company_id.id)] 指派 ...

  10. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...