微信小程序获取当前订单+导航

map.js

// 拒绝授权后，弹框提示是否手动打开位置授权
export function openConfirm() {
    return new Promise((resolve, reject) => {
        uni.showModal({
            title: "请求授权当前位置",
            content: "我们需要获取地理位置信息，为您提供导航",
            success: (res) => {
                if (res.confirm) {
                    uni.openSetting().then((res) => {
                        if (res[1].authSetting["scope.userLocation"] === true) {
                            resolve(); // 打开地图权限设置
                        } else {
                            reject();
                        }
                    });
                } else if (res.cancel) {
                    reject();
                }
            },
        });
    });
}
// 彻底拒绝位置获取
export function rejectGetLocation() {
    uni.showToast({
        title: "你拒绝了授权，无法获得周边信息",
        icon: "none",
        duration: 2000,
    });
}


//进行经纬度转换为距离的计算
export function Rad(d) {
    return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
}
/*
             计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
             默认单位km
            */
export function getMapDistance(lat1, lng1, lat2, lng2) {
    var radLat1 = Rad(lat1);
    var radLat2 = Rad(lat2);
    var a = radLat1 - radLat2;
    var b = Rad(lng1) - Rad(lng2);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
        Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137; // EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000; //输出为公里
    //s=s.toFixed(2);
    return s;
}
//计算距离
//   初次位置授权
export function getAuthorize() {
    return new Promise((resolve, reject) => {
        uni.authorize({
            scope: "scope.userLocation",
            success: () => {
                resolve(); // 允许授权
            },
            fail: () => {
                reject(); // 拒绝授权
            },
        });
    });
}
//打开地图
export function openMap(lon, lat) {
    console.log("获取经纬度ssssfff", lon, lat);
    //打开地图，并将门店位置传入
    uni.getLocation({
        success: res => {
            // res.latitude=lat;
            // res.longitude=lon;
            console.log('location success', parseFloat(lat), parseFloat(lon))
            uni.openLocation({
                latitude: parseFloat(lat),
                longitude: parseFloat(lon),
                scale: 18
            })
        }

    })
}

 

主要看onshow和getLocationInfo

 

<!-- 服务计划 -->
<template>
    <view>
        <order-box v-for="(order, index) in orders" :key="index" :serviceName="order.name" :distance="order.distance"
            :name="order.contactPerson" :phone="order.contact" :startTime="order.createTime"
            :gdnumber="order.workOrderId" :fwtype="order.serviceType" :address="order.address" :buttons="order.buttons"
            :orderIndex="index" @invokeMethod="invokeMethod" @navigateToDetail="navigateToDetail" />

        <view>
            <!-- 普通弹窗 -->
            <uni-popup ref="popup" background-color="#fff">
                <view class="popup-content padding" :class="{ 'popup-height': type === 'left' || type === 'right' }">
                    <view class="text" style="text-align: center;width: 50vw;font-size:16px;font-weight: bold;">开始服务
                    </view>
                    <!-- 表单部分 -->
                    <view class="content margin-top">

                        <!-- 图片上传 -->
                        <view class="form-item">
                            <view class="label" style="width:30%;">图片</view>
                            <view class="image-upload">
                                <img v-if="image" :src="image" alt="Uploaded Image" />
                                <view v-else class="image-placeholder" @click="uploadImage">📷</view>
                            </view>
                        </view>

                        <!-- 位置显示 -->
                        <view class="form-item ">
                            <view class="label" style="width: 30%;">位置</view>
                            <view class="coordinates flex flex-direction">
                                <text>纬度: {{ latitude }} </text>
                                <text>经度: {{ longitude }}</text>
                            </view>
                        </view>
                    </view>

                    <!-- 按钮部分 -->
                    <view class="footer ">
                        <view class="btn cancel" @click="cancel" style="margin-right: 20px;">取消</view>
                        <view class="btn confirm" @click="confirm">确定</view>
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
    import OrderBox from '@/components/OrderBox/OrderBox.vue'
    import {
        getStaffOrderPlan
    } from '@/api/choose/index.js'
    import {
        getAuthorize,openMap
    } from '../../utils/map.js'
    
    export default {
        components: {
            OrderBox
        },
        data() {
            return {
                status: '0',
                latitude: '117.237508',
                longitude: '31.852055',
                orders: []
            };
        },
        onReady() {
            //   wx请求获取位置权限
            getAuthorize()
                .then(() => {
                    //   同意后获取
                    this.getLocationInfo();
                    console.log("启用")
                })
                .catch(() => {
                    //   不同意给出弹框，再次确认
                    openConfirm()
                        .then(() => {
                            this.getLocationInfo();
                        })
                        .catch(() => {
                            rejectGetLocation();
                        });
                });
        },
        methods: {
            // 确认授权后，获取用户位置
            getLocationInfo() {
                const that = this;
                console.log("世界经济")
            
                uni.getLocation({
                    type: "gcj02",
                    success: function(res) {
                        // 暂时
                        that.longitude = res.longitude; //118.787575;
                        that.latitude = res.latitude; //32.05024;
                        console.log("获取当前的用户经度", that.longitude);
                        console.log("获取当前的用户纬度", that.latitude);
                        var long = 0;
                        var lat = 0;
                        //小数点保留六位  经度
                        if (that.longitude.toString().indexOf('.') > 0) {
                            const longlatsplit = that.longitude.toString().split('.');
                            if (longlatsplit.length >= 2) {
                                long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat(
                                    "." + longlatsplit[1].slice(0, 6));
                            }
                        }
                        if (that.latitude.toString().indexOf('.') > 0) {
                            const longlatsplit1 = that.latitude.toString().split('.');
                            if (longlatsplit1.length >= 2) {
                                lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat(
                                    "." + longlatsplit1[1].slice(0, 6));
                            }
                        }
                        getStaffOrderPlan(that.status, that.latitude, that.longitude)
                            .then(res => {
                                console.log(that.status)
                                console.log(that.latitude)
                                console.log(that.longitude)
                                console.log("返回的内容:", res); // 打印返回的内容
                                that.orders = res.data.map(order => {
                                    return {
                                        ...order,
                                        buttons: [{
                                                label: '联系客户',
                                                onClick: 'handleConfirmAcceptOrder',
                                                style: {
                                                    backgroundColor: '#FAC427',
                                                    color: '#ffffff',
                                                    marginLeft: '8px',
                                                    marginRight: '0px'
                                                }
                                            },
                                            {
                                                label: '导航',
                                                onClick: 'handleRejectOrder',
                                                style: {
                                                    backgroundColor: '#00B96B',
                                                    color: '#ffffff',
                                                    marginLeft: '8px',
                                                    marginRight: '0px'
                                                }
                                            },
                                            {
                                                label: '前往',
                                                onClick: 'handleQianWang',
                                                style: {
                                                    backgroundColor: '#D3E3FD',
                                                    color: '#ffffff',
                                                    marginLeft: '8px',
                                                    marginRight: '0px'
                                                }
                                            }
                                        ]
                                    };
                                });
                            })
                            .catch(error => {
                                console.error(error);
                            });
                    },
                    fail: function(res) {
                        uni.showToast({
                            title: "定位服务未开启"
                        })
                    }
            
                });
                console.log("世界经济" + that.data)
            },
            handleConfirmAcceptOrder(index) {
                uni.showModal({
                    title: '提示',
                    content: '请确定当前的登录使用的手机号是本机号码，否则会呼叫失败',
                    success: function(res) {
                        if (res.confirm) {
                            console.log(`第${index+1}条: 用户点击确定`);
                        } else if (res.cancel) {
                            console.log(`第${index+1}条: 用户点击取消`);
                        }
                    }
                });
            },
            handleRejectOrder(index) {
                console.log(`第${index+1}条: 用户点击导航`);
                openMap(this.longitude,this.latitude)
            },
            handleQianWang(index) {
                console.log(`第${index+1}条: 用户点击前往`);
                this.$refs.popup.open();
            },
            dialogInputConfirm(e) {
                console.log('输入框内容: ', e.detail.value);
                this.$refs.inputDialog.close();
            },
            invokeMethod(methodName, index) {
                if (this[methodName]) {
                    this[methodName](index);
                } else {
                    console.warn(`Method ${methodName} is not defined`);
                }
            },
            navigateToDetail(index) {
                const order = this.orders[index];
                uni.navigateTo({
                    url: '/pages/order/OrderDetail/OrderDetail?order=' + encodeURIComponent(JSON.stringify(order))
                });
            },
            uploadImage() {
                // 图片上传逻辑
                // 这里可以使用 HTML 的 <input type="file">，或在小程序中使用 API 来上传图片
            },
            cancel() {
                // 取消逻辑
                console.log('取消');
                this.$refs.popup.close();
            },
            confirm() {
                // 确定逻辑
                console.log('纬度:', this.latitude, '经度:', this.longitude);
                this.$refs.popup.close();
            },
        }
    }
</script>

<style scoped>
    .modal {
        width: 300px;
        padding: 16px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }

    .header {
        text-align: center;
        margin-bottom: 16px;
    }

    .title {
        color: red;
        font-size: 16px;
    }

    .content {
        margin-bottom: 16px;
    }

    .form-item {
        display: flex;
        margin-bottom: 12px;
    }

    .label {
        color: #666;
    }

    .input {
        border: 1px solid #ddd;
        padding: 4px;
        width: 150px;
    }

    .image-upload {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ddd;
        width: 100px;
        height: 100px;
    }

    .image-placeholder {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        cursor: pointer;
    }

    .coordinates {
        color: #666;
    }

    .footer {
        display: flex;
        justify-content: space-between;
        text-align: center;
    }

    .btn {
        padding: 2px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin: 0 !important;
        width: 20vw;
        font-size: 16px;
    }

    .cancel {
        background-color: #f0f0f0;
        color: #333;
    }

    .confirm {
        background-color: #FAC427;
        color: white;
    }
</style>