百度地图在jsp页面加载大量轨迹导致地图卡顿
原画线方式:
//存储大量点轨迹json数组:historyPathList
for(var i=0;i<historyPathList.length-1;i++){
drawColorLine(i,color,4,historyPathList);
}
//显示原始路线
function drawColorLine(i,color,weitht,list){
var polyline = new BMap.Polyline([
new BMap.Point(list[i].Lng,list[i].Lat),//起始点的经纬度
new BMap.Point(list[i+1].Lng,list[i+1].Lat)//终点的经纬度
], {strokeColor:color,//设置颜色
strokeWeight:weitht, //宽度
strokeOpacity:1});//透明度
map.addOverlay(polyline);
}
这样写会多加很多不必要的点,而且对API调用了过多次数,会影响性能。
改进:
var polylinePointsArray = [];
for(var i=0;i<historyPathList.length;i++){
polylinePointsArray[i] = new BMap.Point(historyPathList[i].Lng,historyPathList[i].Lat);
}
var polyline = new BMap.Polyline(polylinePointsArray, {strokeColor:"green", strokeWeight:4, strokeOpacity:1})
polyline.id = 123456;
map.addOverlay(polyline);
备注:Polyline是个覆盖物对象,可以和其他对象一样自定义属性的,比如在声明以后设置polyline的id属性直接用polyline.id=content就可以了。再例如:polyline.name
或 polyline.length等。覆盖物对象可以根据自己的需求自定义任何属性,取值的时候只需按这个字段取就可以了。
百度地图在jsp页面加载大量轨迹导致地图卡顿的更多相关文章
- jsp页面加载readyState的五种状态根据我们状态添加进度条
这段代码放在页面最下面 原文如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomet ...
- 百度地图-省市县联动加载地图 分类: Demo JavaScript 2015-04-26 13:08 530人阅读 评论(0) 收藏
在平常项目中,我们会遇到这样的业务场景: 客户希望把自己的门店绘制在百度地图上,通过省.市.区的选择,然后加载不同区域下的店铺位置. 先看看效果图吧: 实现思路: 第一步:整理行政区域表: 要实现通过 ...
- 关于jsp页面加载时报错500的问题
先说一下,问题的发生,个人做了个小系统,成品以后运行了几次,没有问题,结果最后一次测试时,发现登陆页面报错了: 账号密码输入正确,经过后台登陆后,按理说是应该进入登陆成功后的jsp页面,然而结果却是: ...
- idea2019 jsp页面加载不到静态文件原因No mapping found for HTTP request with URI
最近在使用idea2019 学习ssm,但是发现我在项目引用的静态文件怎么都无法加载出来,找了很久才解决~~ 给上目录结构图: 第一种:使用 ${pageContext.request.context ...
- 制作百度地图离线JavaScript API加载本地瓦片地图
全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...
- Web前端性能优化——如何提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...
- 【转】Web前端性能优化——如何提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...
- Web前端性能优化——提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...
- 从输入 URL 到页面加载完成的过程中都发生了什么事情?
这个问题是老生常谈的问题啦,虽然说到处百度都有的答案,还是希望自己能总结一下. 如今有很多答案,都是从硬件开始讲起,比如键盘的响应或者触屏的响应,然后CPU处理到OS的内核等等.这里不作为重点来讲,要 ...
随机推荐
- 一道随机函数题:由rand5()生成rand7()
题目:已知rand5()函数能随机等概率的生成0, 1, 2, 3, 4,利用rand5()函数编写一个rand7()函数实现相似的功能. 分析:其实就是利用rand5()组合成一个更大范围的数,之后 ...
- 【Elasticsearch 7 探索之路】(五)搜索相关 Search-API
本节主要讲解 Elasticsearch 的 搜索相关功能 Search-API,讲解什么是 URL Search 和 Request Body Search 的语法,对常用的语法都会一一进行详细介绍 ...
- shell执行数学运算
整数: expr let $(()) $[] 浮点数: bc 1.使用expr ♦参与运算的成员和运算符之间必须有一个空格: ♦对于那些容易被shell错解的,在它们传入expr命令之前,需要使用sh ...
- JavaScript2 基础
运算符 赋值运算符 用于给变量赋值. y=5;/z=2; 算术运算符 即算数符号,是基本算数运算.+ 加 / - 减/ * 乘/ / 除/ % 取余数/ ++ 自增(y++先赋值再自增/++y先自 ...
- 【JS】312- 复习 JavaScript 严格模式(Strict Mode)
点击上方"前端自习课"关注,学习起来~ 注:本文为 < JavaScript 完全手册(2018版) >第30节,你可以查看该手册的完整目录. 严格模式是一项 ES5 ...
- elasticsearch节点请求流程
- Orleans 初接触(一) 入门例子
[返回导航] 在简单了解了Orleans 之后我们可以通过几个例子去加深印象 一.Orleans入门例子 这个例子是跟着<Orleans入门例子>(https://www.cnblogs. ...
- 关于async/await、promise和setTimeout执行顺序
先来一道关于async/await.promise和setTimeout的执行顺序的题目: async function async1() { console.log('async1 start'); ...
- leetcode-算法系列-两数之和
本系列的题目都是出自于"leetcode" 用博客记录是为了加强自己的记忆与理解,也希望能和大家交流更好更优的解题思路. 题目: 给定一个整数数组和一个目标值,找出数组中和为目标值 ...
- 表格数据js初始绑定
html调用js文件,js初始化时发送Ajax请求,获取页面数据将其写入在html页面上展示 html <div class="card-body"> <!-- ...