zoukankan      html  css  js  c++  java

  • 如何使用BMap.Point传递变量、存储数据？

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

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

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

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

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

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

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    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.         100%;  
    11.         height:100%;  
    12.         background:#ffffff;  
    13.     }  
    14.     #map{  
    15.         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.         300px;  
    28.         height:40px;  
    29.         left:50%;  
    30.         top:50%;  
    31.         margin:-40px 0 0 -150px;  
    32.     }  
    33.     #login input[type=password]{  
    34.         200px;  
    35.         height:30px;  
    36.         padding:3px;  
    37.         line-height:30px;  
    38.         border:1px solid #000;  
    39.     }  
    40.     #login input[type=submit]{  
    41.         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属性仅仅是作为测试用，您可以存任何你想存放的数据。
  • 相关阅读:
    使用对象-关系映射持久化数据
    Spring中使用JDBC
    无法正确解析FreeMarker视图
    使用Java配置SpringMVC
    面向切面的Spring
    高级装配
    爬虫简介与request模块
    列表存储本质以及索引为什么从0开始
    列表和字典操作的时间复杂度
    记录腾讯云中矿机病毒处理过程(重装系统了fu*k)
  • 原文地址：https://www.cnblogs.com/lvlina/p/6667760.html
Copyright © 2011-2022 走看看