324 lines
13 KiB
Plaintext
324 lines
13 KiB
Plaintext
<template>
|
||
<view>
|
||
<!-- <button type="primary" @click="trackLocation" v-if="!isGetLocation">持续定位</button>
|
||
<button type="primary" @click="stopLocation" v-else>停止持续定位</button> -->
|
||
<!-- <button type="primary" @click="onceLocation">单次定位</button> -->
|
||
<!-- <button type="primary" @click="calcDistance">坐标距离计算</button> -->
|
||
<!-- <button type="primary" @click="onGeoQuery">坐标反查</button> -->
|
||
<!-- <button type="primary" @click="onRoutePlan">路径规划(唤起外部地图导航)</button> -->
|
||
<!-- <button type="primary" @click="switchCoordType">切换坐标系,当前:{{coordType}}</button> -->
|
||
|
||
<view class="c-btn">
|
||
<view class="cc" @click="trackLocation" v-if="!isGetLocation">
|
||
<text class="title">开始定位</text>
|
||
<text class="text" v-if="count">定位成功次数：{{count}}次</text>
|
||
<text class="text" v-if="time">{{time}}</text>
|
||
<text class="text log" v-if="log">{{log}}</text>
|
||
</view>
|
||
<view class="cc rr" @click="stopLocation" v-else>
|
||
<text class="title">结束定位</text>
|
||
<text class="text">定位成功次数：{{count}}次</text>
|
||
<text class="text" v-if="time">{{time}}</text>
|
||
<text class="text log" v-if="log">{{log}}</text>
|
||
</view>
|
||
<text class="tips" @click="restart">遇到问题了？ 点击重启</text>
|
||
</view>
|
||
|
||
<!-- <view class="">
|
||
<text :selectable="true">{{result}}</text>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
//引入插件
|
||
const aMapHelper = uni.requireNativePlugin("SLY-AMapHelper");
|
||
// #ifdef APP-PLUS
|
||
import addKeepalive from '../../uni_modules/fdm-keepalive';
|
||
// #endif
|
||
import { positioning } from "@/api/api.js"
|
||
import { wgsToGcj } from "@/utils/wgs.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
result: '',
|
||
coordTyps: ['gcj02'],
|
||
// coordTyps: ['gcj02', 'wgs84', 'bd09'],
|
||
coordIndex: 0,
|
||
myLng: 0,
|
||
myLat: 0,
|
||
isGetLocation: false,
|
||
errCount: 0, //定位失败次数
|
||
timer: null,
|
||
count: 0,
|
||
time: '',
|
||
system_type: ''
|
||
}
|
||
},
|
||
//退出页面后停止定位
|
||
onBackPress() {
|
||
aMapHelper.stopLocation();
|
||
},
|
||
computed: {
|
||
coordType() {
|
||
return this.coordTyps[this.coordIndex]
|
||
},
|
||
userInfo(){
|
||
return this.$store.state.app.userInfo;
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.system_type = uni.getSystemInfoSync().platform;
|
||
},
|
||
methods: {
|
||
//单次定位
|
||
onceLocation() {
|
||
uni.showLoading({
|
||
title: '定位中...'
|
||
})
|
||
this.result = ''
|
||
aMapHelper.getLocation({
|
||
coordType: this.coordType,
|
||
}, (res) => {
|
||
uni.hideLoading();
|
||
this.result = JSON.stringify(res);
|
||
if (res.errorCode == 0) {
|
||
this.myLng = res.longitude;
|
||
this.myLat = res.latitude;
|
||
this.result =
|
||
`
|
||
定位时间：${res.formatTime}
|
||
坐标：${res.longitude},${res.latitude}
|
||
坐标系：${res.coordType}
|
||
位置描述:${res.address}
|
||
`
|
||
} else if (res.errorCode == 12) { //用户拒绝定位权限
|
||
//当用户选择了“拒绝且不再询问”时，应用无法再弹出权限申请框，必须引导用户前往设置页面手动开启。
|
||
let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.errorInfo,
|
||
success: (res) => {
|
||
if (res.confirm && deniedPermissionAndNoAsk) {
|
||
//打开设置页面
|
||
aMapHelper.openSettingPage();
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
})
|
||
},
|
||
//连续定位
|
||
trackLocation() {
|
||
if(this.errCount==-1) this.restart(); // 如果出现问题， 直接重启app
|
||
if(this.system_type=='ios') return this.phoneLocation();
|
||
try{
|
||
// #ifdef APP-PLUS
|
||
addKeepalive();
|
||
// #endif
|
||
this.result = '';
|
||
let count = 0;
|
||
this.isGetLocation = true;
|
||
this.phoneLocation();
|
||
aMapHelper.trackLocation({
|
||
intervalTime: 6*1000,
|
||
notificationTitle: '工单系统',
|
||
notificationContent: '正在定位, 请勿关闭',
|
||
enableTrackExplain: '需要持续获取位置进行上报',
|
||
coordType: this.coordType
|
||
}, (res) => {
|
||
//调试时请以控制台日志是否持续打印为准，息屏后view页面可能不会更新result结果
|
||
// console.log("【持续定位结果】", `时间：${res.formatTime},坐标：${res.longitude},${res.latitude}, 信息:`, res);
|
||
// if(res.errorCode == 0){
|
||
// if(this.errCount>3) this.phoneLocation();
|
||
// else this.errCount++;
|
||
// }
|
||
// if (res.errorCode == 0) {
|
||
// this.result =
|
||
// `
|
||
// 定位次数:${++count}
|
||
// 定位时间：${res.formatTime}
|
||
// 坐标：${res.longitude},${res.latitude}
|
||
// 坐标系：${res.coordType}
|
||
// 设备方向：${res.direction}
|
||
// 海拔：${res.altitude}米`
|
||
// positioning({
|
||
// member_code: this.userInfo.code,
|
||
// positioning: `${res.longitude},${res.latitude}`
|
||
// }).then(ok=>{
|
||
// console.log('上传成功', ok);
|
||
// }).catch(err=>{
|
||
// console.log('上传失败', err);
|
||
// })
|
||
// } else if (res.errorCode == 12) {
|
||
// let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
|
||
// uni.showModal({
|
||
// title: '提示',
|
||
// content: res.errorInfo,
|
||
// success: (res) => {
|
||
// if (res.confirm && deniedPermissionAndNoAsk) {
|
||
// aMapHelper.openSettingPage();
|
||
// }
|
||
// }
|
||
// })
|
||
// }
|
||
})
|
||
}catch(e){
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
//本机连续定位
|
||
phoneLocation(){
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
} else {
|
||
this.count++;
|
||
this.getAddress();
|
||
this.timer = setInterval(() => {
|
||
this.count++;
|
||
this.getAddress();
|
||
}, 6 * 1000);
|
||
}
|
||
},
|
||
|
||
getAddress() {
|
||
uni.getLocation({
|
||
geocode: true,
|
||
success: (res) => {
|
||
console.log('本机获取定位成功', res);
|
||
res = wgsToGcj(res);
|
||
// this.result = `
|
||
// 定位次数:${this.count}
|
||
// 定位时间：${this.formatDate(new Date())}
|
||
// 坐标：${res.longitude},${res.latitude}`
|
||
this.time = this.formatDate(new Date());
|
||
positioning({
|
||
member_code: this.userInfo.code,
|
||
positioning: `${res.longitude},${res.latitude}`
|
||
}).then(ok=>{
|
||
console.log('上传成功', ok);
|
||
this.log = '';
|
||
}).catch(err=>{
|
||
console.log('上传失败', err);
|
||
this.log = '错误！网络状态不佳';
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.log('本机获取定位失败', err);
|
||
this.log = '错误！定位失败，请重启应用重试！';
|
||
}
|
||
})
|
||
},
|
||
formatDate(date) {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
},
|
||
//停止定位
|
||
stopLocation() {
|
||
aMapHelper.stopLocation();
|
||
clearInterval(this.timer);
|
||
this.isGetLocation = false;
|
||
this.errCount = -1;
|
||
},
|
||
//计算坐标距离
|
||
calcDistance() {
|
||
let distance = aMapHelper.calcDistance({
|
||
lngLat1: [116.368904, 39.9234230],
|
||
lngLat2: [116.387271, 39.922501]
|
||
})
|
||
this.result = `距离：${distance}米`
|
||
},
|
||
//逆地址编码，即根据坐标反查位置信息
|
||
onGeoQuery() {
|
||
if (this.myLng == 0 || this.myLat == 0) {
|
||
uni.showToast({
|
||
title: '请先执行单次定位',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
aMapHelper.reGeoQuery({
|
||
lng: this.myLng,
|
||
lat: this.myLat,
|
||
radius: 200, //范围多少米
|
||
coordType: this.coordTyps[this.coordIndex] //火系坐标系还是GPS原生坐标系,仅支持"gcj02","wgs84"2中
|
||
}, res => {
|
||
console.log("逆地址结果", res);
|
||
if (res.errorCode == 0) {
|
||
//成功,更多结果，打印res.result
|
||
this.result = res.result.formatAddress
|
||
} else {
|
||
//失败
|
||
this.result = res.msg;
|
||
}
|
||
})
|
||
},
|
||
onRoutePlan() {
|
||
aMapHelper.routePlan({
|
||
sname: "春熙路", //可选，不传默认“我的位置”
|
||
slat: 30.654899, //可选，不传默认当前纬度
|
||
slng: 104.078657, //可选，
|
||
dname: "天府广场", //可选，不传默认“目的地”
|
||
dlat: 30.657401, //必填
|
||
dlng: 104.065861, //必填
|
||
})
|
||
},
|
||
switchCoordType() {
|
||
this.coordIndex = (this.coordIndex + 1) % 3;
|
||
aMapHelper.stopLocation();
|
||
},
|
||
restart() {
|
||
if (typeof plus !== 'undefined') { // 检查是否在 App 中运行
|
||
plus.runtime.restart()
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.c-btn{
|
||
// background-color: #33ff33;
|
||
width: 750rpx;
|
||
height: 750rpx;
|
||
margin-top: 100rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.cc{
|
||
height: 500rpx;
|
||
width: 500rpx;
|
||
background-color: #42b983;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// background-color: rgba(#42b983, 0.5);
|
||
// border: 5rpx solid #42b983;
|
||
border-radius: 400rpx;
|
||
.title{
|
||
color: #fff;
|
||
font-size: 44rpx;
|
||
}
|
||
.text{
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
}
|
||
.log{
|
||
color: red;
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
.rr{
|
||
background-color: #e6852c;
|
||
}
|
||
.tips{
|
||
color: #999;
|
||
padding-top: 30rpx;
|
||
}
|
||
}
|
||
</style> |