更新记录

1.0.1（2023-05-31） 下载此版本

更新ios适配

1.0.0（2023-04-04） 下载此版本

初始版本

平台兼容性

注意事项

因为是nvue页面所以只能使用手机调试

map地图标点nvue支持更多属性，所以用了nvue，更具情况可换成vue

nvue使用map地图polyline属性重新赋值应先清空在赋值，不然map监测不到不会更新

路线规划使用了高德web服务APi 需要申请web服务key

因为是纯前端调用高德web服务key，相同的地点每次规划可能会有偏差，如有需要可和后端配合，保证路线的一致性

uni.getLocatio获取位置信息ios不支持高精度定位，可把isHighAccuracy属性设为false

工具函数使用说明

    import common from '@/common/js/common.js' //引入js
    //typ==1 获取全部信息
    //typ==2 获取经度
    //typ==3 获取纬度
    common.getLocation(typ) //返回Promise

路线规划核心代码

    //路线规划 默认骑行
    RoutePlanning(type = "bicycling") {
        let origin = this.longitude + ',' + this.latitude
        let destination = Number(this.infodata.store_lon) + ',' + Number(this.infodata.store_lat)
        let destination1 = Number(this.infodata.user_lon) + ',' + Number(this.infodata.user_lat)
        let url = ''
        let edition = null //版本
        if (type == 'bicycling') {
            url = `https://restapi.amap.com/v4/direction/${type}`
            edition = 4
        } else {
            url = `https://restapi.amap.com/v3/direction/${type}`
            edition = 3
        }
        //这里的type == 4为绘制一条路线，可自行修改
        if (this.type == 4) {
            this.getDriverLine(url, edition, origin, destination1, '#02a85c', 1)
        } else {
            this.getDriverLine(url, edition, origin, destination, '#fc6112', 2)
            this.getDriverLine(url, edition, destination, destination1, '#02a85c', 2)
        }
    },

    //路线规划，调用高德地图的api实现规划路线的功能。
    getDriverLine(url, edition, origin, destination, color, type) {
        this.polyline1 = []
        const that = this;

        const key = this.key;

        console.log(`${url}?origin=${origin}&destination=${destination}&key=${key}`)
        uni.showLoading({
            title: '加载中...'
        });
        uni.request({
            url: `${url}?origin=${origin}&destination=${destination}&key=${key}`,
            success: (res) => {
                uni.hideLoading();
                if (res.data.errcode == 30007) {
                    getApp().showToast(res.data.errdetail)
                }
                console.log('高德api调用成功', res);
                let data = {}
                //高德Api版本差异格式不同
                if (edition == 4) {
                    data = res.data.data;
                } else {
                    data = res.data.route;
                }
                var points = [];
                if (data.paths && data.paths[0] && data.paths[0].steps) {
                    var steps = data.paths[0].steps;
                    for (var i = 0; i < steps.length; i++) {
                        //将每一步的数据放到points数组中
                        var poLen = steps[i].polyline.split(";");
                        for (var j = 0; j < poLen.length; j++) {
                            points.push({
                                longitude: parseFloat(poLen[j].split(",")[0]),
                                latitude: parseFloat(poLen[j].split(",")[1]),
                            });
                        }
                    }
                }
                //这个就是走的路，下面有几个属性在app上不支持
                let polyline = {
                    points: points,
                    color: color,
                    arrowLine: true, //带箭头的线
                    dottedLine: true,
                    width: 16, //线宽

                    // colorList: true,

                }
                this.polyline1.push(polyline)
                if (type == 1) {
                    this.polyline = this.polyline1
                } else {
                    if (this.polyline1.length == 2) {
                        this.polyline = this.polyline1
                    }
                }

                // console.log('路线图', this.polyline)
            },
            fail: function(res) {
                uni.hideLoading();
                console.log("获取路线失败", res);
            },
        });
    },