201 lines
8.1 KiB
Vue
201 lines
8.1 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <button type="primary" @click="onceLocation">单次定位</button> -->
|
||
<button type="primary" @click="trackLocation" v-if="!isGetLocation">持续定位</button>
|
||
<button type="primary" @click="stopLocation" v-else>停止持续定位</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="">
|
||
<text :selectable="true">{{result}}</text>
|
||
</view>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//引入插件
|
||
const aMapHelper = uni.requireNativePlugin("SLY-AMapHelper");
|
||
export default {
|
||
data() {
|
||
return {
|
||
result: '',
|
||
coordTyps: ['gcj02'],
|
||
// coordTyps: ['gcj02', 'wgs84', 'bd09'],
|
||
coordIndex: 0,
|
||
myLng: 0,
|
||
myLat: 0,
|
||
isGetLocation: false
|
||
}
|
||
},
|
||
//退出页面后停止定位
|
||
onBackPress() {
|
||
aMapHelper.stopLocation();
|
||
},
|
||
computed: {
|
||
coordType() {
|
||
return this.coordTyps[this.coordIndex]
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.request({
|
||
url:'http://192.168.1.3:3000/upload',
|
||
method:'POST',
|
||
data: {
|
||
time: 111,
|
||
location: 192.366
|
||
},
|
||
success: (res) => {
|
||
console.log(res);
|
||
},
|
||
fail: (err) => {
|
||
console.log(err);
|
||
}
|
||
})
|
||
},
|
||
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() {
|
||
this.result = '';
|
||
let count = 0;
|
||
this.isGetLocation = true;
|
||
aMapHelper.trackLocation({
|
||
intervalTime: 10*1000,
|
||
notificationTitle: '工单系统',
|
||
notificationContent: '正在定位, 请勿关闭',
|
||
enableTrackExplain: '需要持续获取位置进行上报',
|
||
coordType: this.coordType
|
||
}, (res) => {
|
||
//调试时请以控制台日志是否持续打印为准，息屏后view页面可能不会更新result结果
|
||
console.log("【持续定位结果】", `时间：${res.formatTime},坐标：${res.longitude},${res.latitude}, 信息:`, res);
|
||
uni.request({
|
||
url:'http://192.168.1.3:3000/upload',
|
||
method:'POST',
|
||
data: {
|
||
time: res.formatTime,
|
||
location: `${res.longitude},${res.latitude}`
|
||
},
|
||
success: (res) => {
|
||
console.log('success', res);
|
||
},
|
||
fail: (err) => {
|
||
console.log('error', err);
|
||
}
|
||
})
|
||
if (res.errorCode == 0) {
|
||
this.result =
|
||
`
|
||
定位次数:${++count}
|
||
定位时间：${res.formatTime}
|
||
坐标：${res.longitude},${res.latitude}
|
||
坐标系：${res.coordType}
|
||
设备方向：${res.direction}
|
||
海拔：${res.altitude}米`
|
||
|
||
} else if (res.errorCode == 12) {
|
||
let deniedPermissionAndNoAsk = res.deniedPermissionAndNoAsk;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.errorInfo,
|
||
success: (res) => {
|
||
if (res.confirm && deniedPermissionAndNoAsk) {
|
||
aMapHelper.openSettingPage();
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//停止定位
|
||
stopLocation() {
|
||
aMapHelper.stopLocation();
|
||
this.isGetLocation = false;
|
||
},
|
||
//计算坐标距离
|
||
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();
|
||
}
|
||
}
|
||
}
|
||
</script> |