Bootstrap

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

    最近有个需求是想根据车速划分不同的车速区间,并且在画运行轨迹的时候需要切换不同颜色的线。百度地图它有画运行轨迹的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.
;