在开发web项目的过程中使用到了百度地图,由于要在地图中画出很多点比较影响加载速度,查看官方文档,发现有提供加载海量点的功能BMap.PointCollection,用这个加快速度,但是官方文档中提供的demo中仅能获取到点击坐标的经度、纬度。无法再获取到其他信息,用户自定义的数据也不行。要想在点的点击事件中获取到其他information,思考后有两种解决方案:

**1. 获取到经度、纬度之后,通过经度和纬度,循环原先的数据集进行比对,判断出点中的地图点,从而找出开发者需要的数据。 
这种方法在数据集的size适中时可以使用,不会对运行速度有太大的影响,但是弊端非常明显,首先如果数据量巨大,循环需要花费大量的时间,这显然与我们之前想要提升性能相违背。其次有可能出现位置相同的点,那可能会出现得到错误的information。 
2. BMap.PointCollection中的元素为BMap.Point, JavaScript是弱类型的,我们可以让BMap.Point在加入到点集合BMap.PointCollection之前携带数据,那么数据会存储到BMap.PointCollection中,在点击这个点是就可得到BMap.Point,从而得到它携带的除经纬度之外的信息数据。 优选此方案 
示例:**

重要代码:

$(document).ready(function(){
// 百度地图API功能 -122.3695400,"olat":47.6646100 116.404, 39.915
var map = new BMap.Map("container", {});
map.centerAndZoom(new BMap.Point(-122.3695400, 47.6646100), 15);
map.enableScrollWheelZoom();
$('#show').click (function () {
var start_date=$('#start_date').val();
var start_time=$('#start_time').val();
var end_date=$('#end_date').val();
var end_time=$('#end_time').val();
var city=$('#daddress').val();
var url = "<%=basePath %>data/list";
$.ajax({
type: "post",
url: url,
data: {"start_date":start_date,"start_time":start_time,
"end_date":end_date,"end_time":end_time,"city":city},
cache: false,
async : false,
dataType: "json",
success: function (data ,textStatus, jqXHR)
{
map.centerAndZoom(new BMap.Point(data[0].olon, data[0].olat), 14);
map.clearOverlays(); //清除地图上所有覆盖物
if(document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
var points = []; // 添加海量点数据
for(var i = 0; i < data.length; i++) {
var point=new BMap.Point(data[i].olon, data[i].olat);
point.id = data[i].id;
point.otime = data[i].otime;
point.dtime = data[i].dtime;
point.dlon = data[i].dlon;
point.dlat = data[i].dlat;
point.distance = data[i].distance;
point.ofuel = data[i].ofuel;
point.dfuel = data[i].dfuel;
point.fuelConsumption = data[i].fuelConsumption;
point.oaddress = data[i].oaddress;
point.daddress = data[i].daddress;
points.push(point);
}
var options = {
size: BMAP_POINT_SIZE_BIG, //BMAP_POINT_SIZE_SMALL
shape: BMAP_POINT_SHAPE_STAR,
color: '#D84C29'
}
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
pointCollection.addEventListener('click', function(e) {// 监听点击事件
/* var p=e.point;
alert('单击点的坐标为:' + p.lng + ',' + p.lat+' \r '
+p.oaddress + ',' + p.daddress+' '); */
var point = new BMap.Point(e.point.lng, e.point.lat);
var opts = {
width: 200, // 信息窗口宽度
height: 150, // 信息窗口高度
title: "Title", // 信息窗口标题
enableMessage: false//设置允许信息窗发送短息
};
var infowindow = new BMap.InfoWindow(p.oaddress + ',' + p.daddress, opts);
map.openInfoWindow(infowindow, point);
});
map.addOverlay(pointCollection); // 添加Overlay
} else {
alert('请在chrome、safari、IE8+以上浏览器查看');
} /* if("true"==data.flag){
alert("合法!");
return true;
}else{
alert("不合法!错误信息如下:"+data.errorMsg);
return false;
} */
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert("请求失败!");
}
}); }) ;
});

  

BMap添加海量点数据,BMap.Point携带数据的更多相关文章

  1. 与安卓联调,调用安卓那边的方法,获取到安卓传过来的数据,再携带这些数据发送axios请求,获取到用户的信息

    第一步:js调用Android方法:接收Android传递过来的数据,并做处理 //参数一:调用java中的方法   submitFromWeb是方法名,必须和Android中注册时候的方法名称保持一 ...

  2. 启动一个新的activity并携带数据,返回数据给上一个activity

    一.在启动一个新的activity的时候可以通过Intent携带数据,通过Intent.putExtra()方法通过键值对的形势装入数据.在新启动的activity中通过           getI ...

  3. Get请求携带数据量的各种限制及解决办法、Post请求说明

    1.   Get请求携带数据量的各种限制及解决办法 Http Get方法提交的数据大小长度并没有限制,HTTP协议规范没有对URL长度进行限制.这个限制是特定的浏览器及服务器对它的限制. 到新公司处理 ...

  4. TCP连接建立的三次握手过程可以携带数据吗?

    前几天实验室的群里扔出了这样一个问题:TCP连接建立的三次握手过程可以携带数据吗?突然发现自己还真不清楚这个问题,平日里用tcpdump或者Wireshark抓包时,从来没留意过第三次握手的ACK包有 ...

  5. 在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据)

    原文:在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据) 我们都知道,在asp.net中修改 ...

  6. cmd 命令行模式操作数据库 添加查询 修改 删除 ( 表 字段 数据)

    一 查看数据库.表.数据字段.数据 1 首先配置环境变量 进入mysql  或者通过一键集成工具 打开mysql命令行  或者mysql 可视化工具 打开命令行 进入这样的界面   不同的机器操作不同 ...

  7. View可以设置tag携带数据

    View可以设置tag携带数据.       例子             初始化:ImageView  iv_brand2              设置:iv_brand2.setTag(strB ...

  8. 使用size()方法输出列表中的元素数量。需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变。仅当没有任何线程修改列表时,才能保证返回的结果是准确的。

    使用size()方法输出列表中的元素数量.需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变.仅当没 ...

  9. php+mysqli预处理技术实现添加、修改及删除多条数据的方法

    本文实例讲述了php+mysqli预处理技术实现添加.修改及删除多条数据的方法.分享给大家供大家参考.具体分析如下: 首先来说说为什么要有预处理(预编译)技术?举个例子:假设要向数据库添加100个用户 ...

随机推荐

  1. NLP(三) 预处理

    分词 from nltk.tokenize import LineTokenizer,SpaceTokenizer,TweetTokenizer from nltk import word_token ...

  2. HDU-6053 TrickGCD

    题目连接: https://vjudge.net/problem/HDU-6053 Description You are given an array A , and Zhu wants to kn ...

  3. 复习+dfs

    1.参考:https://www.cnblogs.com/ckxkexing/p/8466097.html 这道题自己写过,还写过blog,但是第二次写还是不会. (于是开坑,想做做dfs的整理.

  4. Gym 100851 Distance on Triangulation

    题意:给你一个N边形, 然后这个n边形有n-3条边,然后询问2点之间的最短路. 题解:分治. 我们可以找到一条边,使得这幅图能分成大小相同的2幅图,那么我们就可以确定那些被分割开的询问的答案是多少了. ...

  5. CodeForces 1018B The hat

    The hat 题解: 定义d[i]为第i个数和他对面的差值. 然后我们可以发现d[i]和d[i+1]的差值只会有3种情况2, -2, 0. 并且可以知道 d[i] = - d[i+n/2] 所以如果 ...

  6. Prometheus安装

    Prometheus安装 下载地址: https://prometheus.io/download/ 现在时间是: 2019.09.07 安装环境: Linux centos7 minimal 虚拟机 ...

  7. yzoj 1201数字三角形3题解

    题意 如下图所示为一个数字三角形: 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 请编程计算从顶至底部某处的一条路径,使该路径所经过的数字的总和最大.约定: (1)每一步可沿直线向下或右 ...

  8. Docker下kafka学习三部曲之一:极速体验kafka

    Kafka是一种高吞吐量的分布式发布订阅消息系统,从本章开始我们先极速体验,再实战docker下搭建kafka环境,最后开发一个java web应用来体验kafka服务. 我们一起用最快的速度体验ka ...

  9. Winform中使用zxing和Graphics实现自定义绘制二维码布局

    场景 zxing.dll下载 https://download.csdn.net/download/badao_liumang_qizhi/11623214 效果 实现 根据上面文章中将简单的二维码生 ...

  10. 初学FPGA图像处理,开发板选择建议

    我用的是ZYNQ7010的开发板,纯粹是入门学习,对于初学者,使用较多的xlinx入门级的开发板一般是zynq7000系列,淘宝上买的较好的是黑金和米联科,我买的就是黑金的,个人觉得教程很少,学习资料 ...