百度地图显示车辆运行轨迹（动态轨迹回放功能）
百度地图开发常用网站
1、百度地图开放平台
百度地图开放平台 | 百度地图API SDK | 地图开发
2、百度地图 Javascript API
JavaScript API v3.0 http://lbsyun.baidu.com/index.php?title=jspopular3.0
JavaScript API v2.0 http://lbsyun.baidu.com/index.php?title=jspopular
JavaScript API Lite http://lbsyun.baidu.com/index.php?title=jspopularLiteV1
3、JavaScript API v2.0类参考
百度地图JSAPI 2.0类参考
4、百度地图示例DEMO（JavaScript API v2.0）
地图JS API示例 | 百度地图开放平台
5、百度地图 ak 申请：（JavaScript API v2.0）
jspopular | 百度地图API SDK
6、开源库（JavaScript API v2.0）：鼠标绘制工具条、热力图、聚合marker、测距工具、自定义覆盖物、自定义信息窗口、路书等功能
jspopular | 百度地图API SDK
7、百度地图坐标拾取系统
拾取坐标系统
说明
项目中使用 JavaScript API v2.0 版本，当然也可以使用最新版 V3.0。
JavaScript API Lite是移动端浏览器上构建地图应用
百度地图显示车辆轨迹
1、百度地图 ak 申请：（JavaScript API v2.0）
2、实现效果图如下：
首先说明一下，这个功能主要是完成后台在地图上图层显示车辆的运行轨迹（线）动态效果，一般车辆的轨迹可能通过app采集 或 车载终端上传到服务器。
这里的车辆轨迹线显示还是保留，车辆在上面运行更加直观的显示。
这里用到的百度地图开源库中的路书功能：
jspopular | 百度地图API SDKhttps://lbsyun.baidu.com/index.php?title=jspopular/openlibraryBMapLibrary - Helphttp://api.map.baidu.com/library/LuShu/1.2/docs/help.html
上面的轨迹运行图是官方给的demo，我们这里换了车辆图标，最终效果图如下：
3、源代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>百度地图显示车辆运行轨迹（静态）</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你在百度地图开放平台申请的ak"></script><!-- 你在百度地图开放平台申请的ak --><!-- 路书功能 --><script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script></head><body><div id="allmap" style="position: absolute; width: 100%; top: 0px; bottom: 0px"></div><script type="text/javascript">//添加鼠标单击事件、鼠标触发事件 function addMarkerClickHandler( content, marker , showType) {//图层点击事件，像是详细信息marker.addEventListener("click", function (e) {openInfo(content, e);});//鼠标经过图层时的操作marker.addEventListener("mouseover", function (e) {marker.setTop(true);//设置显示在最上面，防止多图层显示在相同位置时 无法知道时哪个图层marker.setIcon(icon_highlight);//设置图层高亮显示if (marker.getLabel()) {marker.getLabel().show();}});//鼠标离开图层后的操作marker.addEventListener("mouseout", function (e) {marker.setTop(false);//显示不同的颜色显示标签//showType//复原图层的原始图标if (showType == "1") {marker.setIcon(icon_red);} else if (showType == "2") {marker.setIcon(icon_green);}//隐藏图层标签内容if (marker.getLabel()){marker.getLabel().hide();}});} //显示信息窗口参数及显示函数/** 信息窗口参数 */var opts = {width : 220, // 信息窗口宽度//height : 200, // 信息窗口高度//title : "详细信息" , // 信息窗口标题enableMessage : false// 设置允许信息窗发送短息};function openInfo(content, e) {var p = e.target;var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象map.openInfoWindow(infoWindow, point); // 开启信息窗口}var map = new BMap.Map("allmap", { minZoom: 9, maxZoom: 19 });var point = new BMap.Point(116.128554, 24.294562);var top_left_navigation = new BMap.NavigationControl();map.addControl(top_left_navigation);// 添加平移缩放控件map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 添加比例尺控件map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件map.enableScrollWheelZoom();//启用滚轮放大缩小map.centerAndZoom(point, 9);var bmp_type = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });map.addControl(bmp_type);//显示车辆轨迹线//车辆轨迹坐标var latLngArray = ["113.408984,23.174023","113.406639,23.174023","113.403944,23.173566","113.400827,23.17394","113.397468,23.174496","113.391494,23.174513","113.389032,23.174588","113.388736,23.173217","113.388511,23.171888","113.388592,23.170501","113.38861,23.170219","113.38861,23.168342","113.388574,23.165218"];//中心点坐标var carCenterPoint = new BMap.Point(113.408984, 23.174023);//轨迹显示样式var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {scale: 0.6,//图标缩放大小strokeColor: '#fff',//设置矢量图标的线填充颜色strokeWeight: '2',//设置线宽});var icons = new BMap.IconSequence(sy, '10', '30');// 创建polyline对象var pois = [];var carOpts = {position: carCenterPoint, // 指定文本标注所在的地理位置offset: new BMap.Size(30, -30) //设置文本偏移量}var carlabel = new BMap.Label("某车辆轨迹", carOpts); // 创建文本标注对象carlabel.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});map.addOverlay(carlabel);map.centerAndZoom(carCenterPoint , 17);for(var i = 0; i < latLngArray.length ; i++) {var latLng = latLngArray[i];var pointArray = latLng.split(",");pois.push(new BMap.Point(pointArray[0], pointArray[1]));}var polyline = new BMap.Polyline(pois, {enableEditing: false,//是否启用线编辑，默认为falseenableClicking: true,//是否响应点击事件，默认为trueicons: [icons],strokeWeight: '8',//折线的宽度，以像素为单位strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1strokeColor: "#18a45b" //折线颜色});map.addOverlay(polyline);//显示动画效果//车辆轨迹动画图标var icon_gps_car_run = new BMap.Icon('C:\\Users\\zgp2010\\Desktop\\icon_gpscar_run.png', new BMap.Size(32,32),{anchor: new BMap.Size(16, 16)});// alert("将为您显示车辆轨迹动画效果。。。");//var trackContent = realName +" : "+ startTimeStr + "至"+ endTimeStr;var trackContent = "某车辆轨迹回放";// map.setViewport(pois);var lushu = new BMapLib.LuShu(map,pois,{defaultContent: trackContent,autoView:false,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整icon: icon_gps_car_run,speed: 100,enableRotation:true,//是否设置marker随着道路的走向进行旋转});lushu.start();</script></body></html>车辆图片：
https://img-blog.csdnimg.cn/9936f5bbd8e84291b5a6ab173bf3fc3c.png
百度地图显示车辆运行轨迹（动态轨迹回放功能）相关推荐
- 百度路书实现车辆轨迹动态回放功能-javascrpt版
基于百度路书js实现车辆轨迹回放功能:接到一个新需求,实现车辆历史轨迹回放功能,之前没有做过,根据网上各种文章走了一些坑,基本上都是半成品,最后还是看百度地图原生api完成开发,现在把最终结果分享给大 ...
- 使用supermap实现轨迹动态回放功能
引入地图的方式详见另一篇文章在vue项目中使用supermap,基于 SuperMap iClient 8C(2017) for JavaScript,底图为天地图 第一个节点做了单独的处理 < ...
- uni-app map路线轨迹回放功能及turf.js实现缓冲区渲染（微信小程序）
使用uni-app中 map组件实现路线轨迹回放功能. 1.通过接口获取返回的轨迹点. 2.地图的坐标系与轨迹点的坐标系要保持一致,否则轨迹有偏差.点经纬度转换,wgs84togcj02 =>j ...
- vue2+百度离线地图实现多车辆行驶动态轨迹
vue2+百度离线地图实现行驶多车辆动态轨迹 实现多多车辆实时轨迹监控,每个10秒监测一次接口,进行动态追加.(前端实现,如果数量庞大的车辆移动,很消耗性能) 百度离线地图引入方法查看: vue项目实 ...
- js室内地图开发_如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回放 ...
- cesium 根据SampledPositionProperty与timeline实现轨迹回放功能（跟随视角、上帝视角） 详细代码与理解记录
cesium 根据SampledPositionProperty与timeline实现轨迹回放功能(跟随视角.上帝视角) 详细代码与理解,文末附完整代码 最终类似效果展示 大致原理摘要 引用出处 这个 ...
- 高德地图轨迹回放功能
一.介绍 在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...
- html 百度地图显示轨迹,百度地图，地图轨迹
百度地图,记录行动轨迹: 效果图: 上代码: body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; ...
- 高德地图单点、多点标记，轨迹绘制，自定义标记覆盖物,给标记添加点击事件，移除所有标记和轨迹，轨迹回放功能
文档地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare 注册 到官网注册一下就可以了https://lbs.amap.com/并创 ...
- 使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
最新文章
- Vue的报错Echarts Cannot read property ‘init‘ of undefined
- Cordova插件中JavaScript代码与Java的交互细节介绍
- 70后存款100万，有房有车无贷款，每月租金1.5万，可以退休吗？
- （1）解锁MongoDB replica set核心姿势
- ASP.NET Core 2.0 支付宝当面付之扫码支付
- 如何构建JavaScript警报框或弹出窗口
- tp3 跨域_vue 跨域访问tp3接口，tp3 I()方法无法获取前端请求数据
- django 1.8 官方文档翻译： 3-5-1 使用Django输出CSV
- mvc5 @html,如何在MVC 5中使用 HTML5 Viewer
- 同步中心服务器,同步中心以非常慢的速度同步脱机文件 - Windows Server | Microsoft Docs...
- Linux shell脚本中如何读取跟shell脚本同一目录下的配置文件
- 计算机学习知识,如何学习计算机知识呢
- Nginx 学习--初级篇，Nginx 认识以及作用
- 在Asp.net中弹出对话框，确定后跳转到其他页面
- showModalDialog的用法
- iso12233测试方法_ISO12233图像分辨率测试卡的使用方法
- 导出包含富文本内容和图片的word和pdf
- 物来顺应，未来不迎，当时不杂，既过不恋
- AIC、BIC、QAIC及HQ准则
- flixel 一个游戏开发的框架