百度地图运行轨迹根据车速显示不同颜色线

最近有个需求是想根据车速划分不同的车速区间，并且在画运行轨迹的时候需要切换不同颜色的线。百度地图它有画运行轨迹的API，不过是根据一系列的经纬度来画一条线，但是只是展示一种颜色。网上百度了也没有发现有相似的，无奈就自己琢磨改写了部分。可能有不完善的地方，欢迎大家一起交流。

1.模拟后台数据，需要后台传经纬度速度，根据速度选择使用哪种颜色的线，根据经纬度画线。

现大体模拟了机组数据，如下：

Mock.mock(loUrl('historyTripView'),{"CarTripInfo":[{'speed':20,'dtLongitude':'116.387112','dtLatitude':'39.920977'},{'speed':50,'dtLongitude':'116.385243','dtLatitude':'39.913063'},{'speed':100,'dtLongitude':'116.394226','dtLatitude':'39.917988'},{'speed':80,'dtLongitude':'116.401772','dtLatitude':'39.921364'}]
});

2.读取模拟的接口数据，拿到数组对象，传给组件。（ps:项目是使用的vue,所以将此模块写成了个组件）

前台获取：

that.routedata=that.carTripList;

组件通过watch方法获取值：

  watch: {dataRoute: function (val) {debugger;var runLine=val;/**添加终点和起点的标记**/this.addMarker(new BMap.Point(runLine[0].dtLongitude,runLine[0].dtLatitude),'终点');this.addMarker(new BMap.Point(runLine[runLine.length-1].dtLongitude,runLine[runLine.length-1].dtLatitude),'起点');var arrPois = [];var lineColor="";//将后台读取到的GPS点信息，全部存储为百度的BMap.Point坐标点对象并用数组装起来//循环遍历数组for(var i=0;i<val.length-1;i++){arrPois.splice(0,arrPois.length);//清空数组,如若不清空，会在原来基础上每次在重复的增加一边。这儿是让每两个点画线，否则第二次进来的时候就成四个数据了，第二个重复了一次arrPois.push(new BMap.Point(val[i].dtLongitude,val[i].dtLatitude));arrPois.push(new BMap.Point(val[i+1].dtLongitude,val[i+1].dtLatitude));//区间颜色if(val[i].speed<30){lineColor="yellow";}else if(val[i].speed>30&&val[i].speed<60){lineColor="green";}else if(val[i].speed>60&&val[i].speed<90){lineColor="black";}else {lineColor="red";}//创建线路var polyline = new BMap.Polyline(arrPois,//所有的GPS坐标点{strokeColor : lineColor, //线路颜色strokeWeight : 4,//线路大小//线路类型(虚线)strokeStyle : "dashed"});//绘制线路this.mapInit.addOverlay(polyline);}}}

在methods中写标记文本的方法及初始加载地图：
methods:{

initRouteMap:function () {// 百度地图API功能
                this.mapInit = new BMap.Map(this.routeSet.id);    // 创建Map实例
                this.mapInit.centerAndZoom(new BMap.Point(116.404, 39.915), 15);  // 北京初始化地图,设置中心点坐标和地图级别
                this.mapInit.setCurrentCity("青岛");          // 设置地图显示的城市 此项是必须设置的
                this.mapInit.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            },

/**
 * 标记
 * @param {Object} point
 */
addMarker: function (point, name) {var marker = new BMap.Marker(point);var label = new BMap.Label(name, {offset: new BMap.Size(20, -10)});marker.setLabel(label);this.mapInit.addOverlay(marker);
}

OK，这样就已大体模拟出了区间段不同颜色的线。

百度地图运行轨迹根据车速显示不同颜色线相关推荐

百度地图实现轨迹回放（显示到达时间）
使用了百度路书直接上代码,添加秘钥直接运行 <!DOCTYPE html> <html> <head><meta http-equiv="Cont ...
百度地图根据经纬度坐标，显示汽车行驶轨迹
继上一篇:百度地图根据经纬度坐标,显示轨迹又进行了些许优化.将固定点为变为汽车行驶轨迹并添加点位. 上一篇链接:https://blog.csdn.net/qq_36865945/article/d ...
百度地图获取行政区域以及自定义显示网格
目录 1 问题描述 2 独立显示区域 3 自定义网格 4 显示自定义网格 5 延展 6 参考文献 1 问题描述 (1) 通过百度地图或者高德地图只展示某一个行政区域,例如整个地图只展示郑州市金水区,其 ...
android百度地图覆盖物异步加载图片,Android 百度地图marker中图片不显示的解决方法(推荐)...
目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: ...
调用百度地图API，如何只显示某个省份的地图
需求如下 1.调用百度地图API 2.只显示某个省份的地图如安徽省,其他的都不要显示实现步骤如下 1.调用百度地图Api,显示地图 https://blog.csdn.net/tian_jiangn ...
iOS 开发百度地图在模拟器上只显示网格！
虚拟机上不显示地图,只显示格子了,如下图: 因为模拟器上面默认得不是国内得位置,而国外得位置或者港澳台地区, 百度地图不支持,所以显示空白, 解决方法:点击模拟器-->(菜单导航栏)调试--&g ...
百度地图鹰眼轨迹服务
这里写目录标题百度地图鹰眼轨迹服务鹰眼轨迹服务概述: 鹰眼轨迹服务基本概念: 权限与配额: 创建鹰眼服务: 获取服务id: 终端管理: 添加entity: 添加entity自定义字段: 更新ent ...
百度地图根据经纬度坐标，显示轨迹
1.html 部分设置存放地图的div,定义id和宽高,并引入百度地图相关JS <div id="baiduMap" style="width:600px;heig ...
百度地图描绘轨迹html,百度地图API 绘制轨迹历史
DOCTYPE html> 2 3 4 5 6 7 body, html{width:100%;height:100%;overflow:hidden;margin:0;font-family: ...

百度地图运行轨迹根据车速显示不同颜色线

百度地图运行轨迹根据车速显示不同颜色线相关推荐

最新文章

热门文章