【九月打卡】第6天 多端全栈项目实战

课程名称：多端全栈项目实战：商业级代驾全流程落地

课程章节：  华夏代驾全栈小程序实战

课程讲师： 神思者

课程内容：

    创建订单

课程收获：

onShow: function() {
    let location = chooseLocation.getLocation();
    if (location != null) {
        let place = location.name;
        let latitude = location.latitude;
        let longitude = location.longitude;
        if (that.flag == 'from') {
            that.from.address = place;
            that.from.latitude = latitude;
            that.from.longitude = longitude;
        } else {
            that.to.address = place;
            that.to.latitude = latitude;
            that.to.longitude = longitude;
            //跳转到线路页面
            uni.setStorageSync("from",that.from)
            uni.setStorageSync("to",that.to)
            uni.navigateTo({
                url: `../create_order/create_order`
            });
        }
    }},

if 判断是起点还是终点 需要传递六个参数 分别是 起点位置 起点经纬度  终点位置 终点经纬度 

所以采用uni.setStorageSync 进行存储 之后跳转页面

在订单页面使用onload 进行接收数据

设置控件的 宽高

    //设置地图控件的高度适配屏幕高度
    let windowHeight = uni.getSystemInfoSync().windowHeight;
    that.windowHeight = windowHeight;
    that.contentStyle = `height:${that.windowHeight}px;`;
    
    
    qqmapsdk = new QQMapWX({
        key: that.tencent.map.key    });
    //初始化地图
    that.map = uni.createMapContext('map');

在视图层 编写

<map
   id="map"
   :longitude="from.longitude"
   :latitude="from.latitude"
   :style="contentStyle"
   scale="12"
   :enable-traffic="false"
   :show-location="true"
   class="map"
   :polyline="polyline"
   :markers="markers"
></map>

计算最佳线路、预估里程和时长的代码可以用一个函数给封装起来，将来使用的时候可以进行调用。

qqmapsdk.direction({
        mode: 'driving',
        from: {
            latitude: ref.from.latitude,
            longitude: ref.from.longitude        },
        to: {
            latitude: ref.to.latitude,
            longitude: ref.to.longitude        },
        success: function(resp) {
            if (resp.status != 0) {
                uni.showToast({
                    icon: 'error',
                    title: resp.message                });
                return;
            }
            let route = resp.result.routes[0];
            let distance = route.distance;
            let duration = route.duration;
            let polyline = route.polyline;
            ref.distance = Math.ceil((distance / 1000) * 10) / 10;
            ref.duration = duration;
            let points = ref.formatPolyline(polyline);

            ref.polyline = [
                {
                    points: points,
                    width: 6,
                    color: '#05B473',
                    arrowLine: true
                }
            ];
            ref.markers = [
                {
                    id: 1,
                    latitude: ref.from.latitude,
                    longitude: ref.from.longitude,
                    width: 25,
                    height: 35,
                    anchor: {
                        x: 0.5,
                        y: 0.5
                    },
                    iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
                },
                {
                    id: 2,
                    latitude: ref.to.latitude,
                    longitude: ref.to.longitude,
                    width: 25,
                    height: 35,
                    anchor: {
                        x: 0.5,
                        y: 0.5
                    },
                    iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
                }
            ];
        }
    });},

之后将这个方法在onshow进行调用

因为小程序挂起在后台的时候 ，过了几分钟 再次回到小程序 就需要重新计算最佳路线，所以在onshow比较合适