BMapGL实现地图轨迹

想要实现:

  1. 轨迹运动地图视角不能随之改变
  2. 有icon标识运动当前的位位置

总的说就是在BMapGl里实现BMap的轨迹运动功能

由于数据之间的经纬度之间的距离太遥远,不能使用每隔一段时间换一个point这种办法,后来仔细看了看百度地图的demo文档,路书的能实现均匀的轨迹运动,但是需求和demo还是有一点点的不同,所以做了小小的改动。
路书demo
最后实现的效果如下:

  • 引入路书的js
  • 在地图上根据数据绘制出一条线
  • icon和轨迹
 var points = [] //里面为多个point的点var point = new BMapGL.Point(116.39,28.33)var polyline = new BMapGL.Polyline(points, { strokeColor: '#1a66c7ba', strokeWeight: 6, strokeOpacity: 0.2 }) //创建折线//添加在地图上 这里的“map”地图初始化就定义的变量map.addOverlay(polyline)引入您需要用的iconvar icon = require('@/assets/img/carIcon.png')var trackExample = new BMapGLLib.LuShu(map, points, {// defaultContent: '起飞啦', // "信息窗口文案"autoView: true, // 是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整speed: 100,icon: new BMapGL.Icon(icon, new BMapGL.Size(30, 30), { anchor: new BMapGL.Size(24, 24) }),enableRotation: true, // 是否设置marker随着道路的走向进行旋转
})

当然这里路书的事件也是一样的,直接在需要用到的地方代用就ok了

//开始
trackExample.start();
//停止
trackExample.stop();
//暂停
trackExample.pause();
//隐藏信息窗口
trackExample.hideInfoWindow();
//展示信息窗口
trackExample.showInfoWindow();

路书的js也可以直接下载放在项目里面,需要的如下:
https://bj.bcebos.com/v1/mapopen/github/BMapGLLib/Lushu/src/Lushu.min.js

BMapGL实现地图轨迹运动(地图视角不变)相关推荐

  1. 百度地图api实现轨迹运动效果

    百度地图api实现轨迹运动效果 实现逻辑: 实现轨迹运动的效果无非就是将一段路程细化为很多个点,然后不过的根据这些点来画出移动轨迹. 实现流程: 1)使用DrivingRoute,根据起点和终点的位置 ...

  2. 百度地图轨迹回放,自定义路书,边走边画线

    转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线 在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...

  3. 高德地图-轨迹回放(二)

    利用高德地图作轨迹回放的另一种方法是利用官方api覆盖物中的AMap.Polyline来做,官方给出的例子中也是此原理实现的. 实现地图轨迹的主要函数如下 function track(){map.c ...

  4. html 百度地图显示轨迹,百度地图,地图轨迹

    百度地图,记录行动轨迹: 效果图: 上代码: body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; ...

  5. 地图轨迹跟踪系统设计与实现(Android+Eclipse+APP)

    目 录 1 在线地图轨迹APP概述 1 1.1 本论文的背景及意义 1 1.2 本论文的主要方法和研究进展 1 1.3 本论文的主要内容 1 1.4 本论文的结构安排 1 2 系统分析 3 2.1 研 ...

  6. Vue Baidu Map 实现Vue版本地图轨迹回放(App端)

    Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...

  7. android高德地图轨迹偏纠,GitHub - YangHaoyi/DrawTraceDemo: 高德地图轨迹回放带定位纠偏加彩虹渐变线...

    DrawTraceDemo 高德地图轨迹回放带定位纠偏加彩虹渐变线 由于高德自身持续定位存在偏移状况,故摒弃了高德自身的定位点,改用自定义marker点作为定位点 加注轨迹纠偏函数,根据时间判定此次移 ...

  8. 关于地图轨迹回放的一点小研究

    大家在做交通相关业务时,不可避免的要用到轨迹回放的相关功能,即根据一段时间内的GPS轨迹点来绘制车辆行驶的轨迹,下面结合自己做所项目相关业务以及自己的相关总结,说说轨迹回放相关功能实现. setTim ...

  9. html引入百度地图报错,vue引入百度地图BMapGL,或者其他个性化地图

    3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...

最新文章

  1. ClassLoader工作机制
  2. 清华大学计算机毕业论文,清华大学毕业论文撰写要求
  3. BZOJ-2705-Longge的游戏-SDOI2012-欧拉函数
  4. apt-get install用发
  5. [蓝桥杯][算法提高VIP]盾神与积木游戏(贪心)
  6. swoole之代码热更新实现
  7. 对于boost锁机制结论性的介绍
  8. linux升级python
  9. 一个经典的对象级别插件的开发
  10. 用好String、String[]和char[]真香(洛谷P1179题题解,Java语言描述)
  11. 二分法之旋转有序数组
  12. java技术cad转图片_一键完成百张图纸转换,教你最简单CAD转JPG格式方法,只需三步...
  13. linux清理根目录空间,如何快速清理Linux磁盘空间
  14. 足球大数据预测胜平负、走地之人工智能算法现状与改进措施
  15. c语言中各变量占得字节,在C语言中各种数据类型各占多少位
  16. 逆水寒江湖无限服务器等级,逆水寒上限多少级 逆水寒等级上限是多少
  17. 人生励志语录 排比句
  18. 医院信息系统模块介绍
  19. 怎么把PDF翻译成中文?教你便捷翻译方法
  20. Qt--QObject

热门文章

  1. JS,统计图表大全--三、饼形图(饼图及环形图)
  2. antd 阿里图标库扩展a-icon 图标
  3. thinkpade450装内存条_Thinkpad e450c我想加一个内存条,因为开机就满了百分50左右,该加什么样的内存条?低电...
  4. python告诉你ti8 dota2英雄bp
  5. 教你用 CSS 实现超真实的 3D 相册,让你的照片立体感 UPUP
  6. 7个你不可不知的大数据定义
  7. 小伙伴们要的飞机大战代码 简易入门版
  8. html把保留图片改为提交按钮,如何制作图片按钮,并为图片按钮添加提交表单和重置表单功能...
  9. Hacked Exam 14pts 2021Google codejam round1A
  10. swift 学习-- 元组