BMap添加海量点数据,BMap.Point携带数据
在开发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携带数据的更多相关文章
- 与安卓联调,调用安卓那边的方法,获取到安卓传过来的数据,再携带这些数据发送axios请求,获取到用户的信息
第一步:js调用Android方法:接收Android传递过来的数据,并做处理 //参数一:调用java中的方法 submitFromWeb是方法名,必须和Android中注册时候的方法名称保持一 ...
- 启动一个新的activity并携带数据,返回数据给上一个activity
一.在启动一个新的activity的时候可以通过Intent携带数据,通过Intent.putExtra()方法通过键值对的形势装入数据.在新启动的activity中通过 getI ...
- Get请求携带数据量的各种限制及解决办法、Post请求说明
1. Get请求携带数据量的各种限制及解决办法 Http Get方法提交的数据大小长度并没有限制,HTTP协议规范没有对URL长度进行限制.这个限制是特定的浏览器及服务器对它的限制. 到新公司处理 ...
- TCP连接建立的三次握手过程可以携带数据吗?
前几天实验室的群里扔出了这样一个问题:TCP连接建立的三次握手过程可以携带数据吗?突然发现自己还真不清楚这个问题,平日里用tcpdump或者Wireshark抓包时,从来没留意过第三次握手的ACK包有 ...
- 在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据)
原文:在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据) 我们都知道,在asp.net中修改 ...
- cmd 命令行模式操作数据库 添加查询 修改 删除 ( 表 字段 数据)
一 查看数据库.表.数据字段.数据 1 首先配置环境变量 进入mysql 或者通过一键集成工具 打开mysql命令行 或者mysql 可视化工具 打开命令行 进入这样的界面 不同的机器操作不同 ...
- View可以设置tag携带数据
View可以设置tag携带数据. 例子 初始化:ImageView iv_brand2 设置:iv_brand2.setTag(strB ...
- 使用size()方法输出列表中的元素数量。需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变。仅当没有任何线程修改列表时,才能保证返回的结果是准确的。
使用size()方法输出列表中的元素数量.需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变.仅当没 ...
- php+mysqli预处理技术实现添加、修改及删除多条数据的方法
本文实例讲述了php+mysqli预处理技术实现添加.修改及删除多条数据的方法.分享给大家供大家参考.具体分析如下: 首先来说说为什么要有预处理(预编译)技术?举个例子:假设要向数据库添加100个用户 ...
随机推荐
- E-Find the median_2019牛客暑期多校训练营(第七场)
题意 N次操作,每次塞入区间\([L,R]\)的每个数,并输出此时的中位数. 题解 如果题目不是每次塞入一整个区间,而是只塞入一个数,可以简单的建权值线段树查询区间第K大,由于每次都是查询整个区间就不 ...
- Investigating Div-Sum Property UVA - 11361
An integer is divisible by 3 if the sum of its digits is also divisible by 3. For example, 3702 is d ...
- 201871010134-周英杰《面向对象程序设计(java)》第二周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- Linux开机启动过程(个人理解)
简述Linux启动过程 1)BIOS开机自检 2)MBR引导 3)启动引导程序菜单(GRUB) 4)加载内核 5)加载虚拟文件系统加载函数模块 6)启动系统进程 /sbin/init --->/ ...
- DB-Lib error message 20002, severity 9
完整报错内容:20002, b'DB-Lib error message 20002, severity 9:\nAdaptive Server connection failed (I0.185.4 ...
- Pandas Python For Data Science
- 012 模块1-turtle库的使用
目录 一.概述 二.turtle库基本介绍 2.1 turtle库概述 2.2 标准库 2.3 turtle的原(wan)理(fa) 2.4 turtle的魅力 三.turtle绘图窗体布局 3.1 ...
- scrapy-redis分布式爬取猫眼电影
能够利用redis缓存数据库的优点去重来避免数据的大面积冗余 1.首先就是要创建猫眼爬虫项目 2.进入项目内部创建一个爬虫文件 创建完文件之后就是要爬取的内容,我这边以爬取猫眼电影的title和lin ...
- FreeSql (二)自动迁移实体
FreeSql 支持 CodeFirst 迁移结构至数据库,这应该是(O/RM)必须标配的一个功能. 与其他(O/RM)不同FreeSql支持更多的数据库特性,而不只是支持基础的数据类型,这既是优点也 ...
- Redis缓存和数据库一致性问题
工作中,经常会遇到缓存和数据库数据一致性问题.从理论上设置过期时间,是保证最终一致性的解决方案.这种方案下,我们可以对存入缓存的数据设置过期时间,所有的写操作以数据库为准,对缓存操作只是尽最大努力即可 ...