uniapp+vue3+高德地图API实现线路轨迹

1. 继上一篇的基础上进行记录，实现基于高德地图API实现线路轨迹

上一篇路径：点击链接

用到的方法是 getDrivingRoute，直接上代码，如下

import aMap from "@/utils/amap-wx"  //这个是你要引入的高德地图SDK

//注册高德地图api的key
export const initAMapSdk =  () => {
    return new aMap.AMapWX({
        key: "你的高德地图KEY"
    });
}

/**
 * 获取路线规划
 * @param map 高德地图sdk实例
 * @param start 起点坐标数组
 * @param end 终点坐标数组
 * @returns {Promise}
 */
export const getRoutePlan = (map,start,end) => {
    let _origin = start.longitude + ',' + start.latitude;
    let _destination = end.longitude + ',' + end.latitude;
    return new Promise((resolve,reject) => {
        map.getDrivingRoute({
            origin: _origin,
            destination: _destination,
            success:function (mapData){
                let points = [];
                if (mapData.paths && mapData.paths[0] && mapData.paths[0].steps) {
                    let steps = mapData.paths[0].steps;
                    for (let i = 0; i < steps.length; i++) {
                        let poLen = steps[i].polyline.split(';');
                        for (let j = 0; j < poLen.length; j++) {
                            points.push({
                                longitude: parseFloat(poLen[j].split(',')[0]),
                                latitude: parseFloat(poLen[j].split(',')[1])
                            })
                        }
                    }
                }
                resolve([{
                    points: points,
                    color: '#578bff',
                    width: 5,
                    borderWidth: 1,
                    borderColor: '#578bff'
                }]);
            }
        })
    })
}

然后在你所需页面引入这个方法getDrivingRoute，传入你要规划的起始坐标值即可