微信小程序获取当前订单+导航
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>