微信小程序，使用高德地图绘制路线，并标记起点和终点

data(){

markers:[],

polyline:[],

longitude:'',

latitude:",

amapKey:'',

distance:''

},

methods:{

setPath(){

            const myAmapFun = new amapFile.AMapWX({
                key: this.amapKey // 高德key
            })
            const _this = this
            myAmapFun.getDrivingRoute({
                origin: `${this.userPosition.longitude},${this.userPosition.latitude}`,//起点的经纬度
                destination: `${this.bootEndPosition.longitude},${ this.bootEndPosition.latitude}`,//终点的经纬度
                success: data => {
                    const points = []
                    if (data.paths && data.paths[0] && data.paths[0].steps) {
                        const steps = data.paths[0].steps // 获取途径点
                        steps.forEach(item => {
                            const poLen = item.polyline.split(';') // 对每一組途径点的经纬度進行分割
                            poLen.forEach(data => {
                                points.push({
                                    longitude: parseFloat(data.split(',')[0]),
                                    latitude: parseFloat(data.split(',')[1])
                                })
                            })
                        })
                        //将路线坐标第一个数据作为起点
                        _this.latitude = points[0].latitude
                        _this.longitude = points[0].longitude
                        let mks = []
                        const route = data.paths[0].distance

                      //起点和终点的距离单位km
                        const distance = (route / 1000).toFixed(2)
                        this.distance = distance
                        const duration = route.duration
                        mks.push({
                            id: 1,
                            iconPath: '../../../static/images/origin.png',
                            latitude: _this.userPosition.latitude,
                            longitude: _this.userPosition.longitude,
                            callout: {
                                content: '起点位置',
                                display: 'ALWAYS',
                                color: "#fff",
                                fontSize: 12,
                                padding: 5,
                                bgColor: '#550000',
                                borderRadius: 5
                            },
                            width: 30,
                            height: 30,
                        }, {
                            id: 2,
                            iconPath: '../../../static/images/destination.png',
                            latitude: _this.bootEndPosition.latitude,
                            longitude: _this.bootEndPosition.longitude,
                            callout: {
                                content: '终点位置',
                                display: 'ALWAYS',
                                color: "#fff",
                                fontSize: 12,
                                padding: 5,
                                bgColor: '#550000',
                                borderRadius: 5
                            },
                            width: 30,
                            height: 30,
                        })
                        _this.markers = mks
                    }
                    this.polyline = [{
                        points: points,
                        color: "#0198dd",
                        width: 6,
                        arrowLine: true
                    }]
                },
                fail: err => {
                    console.log(err, '路线失败-----------------')
                }

            })

}

}

效果如图所示：