<template>
<!-- #ifdef APP -->
<text>显示简易操作日志(可滚动查看)</text><button size="mini" @click="log=''">清空日志</button>
<scroll-view style="max-height: 300px;">
<text style="margin: 2px; padding: 2px; border: 1px solid #000000;">{{ log }}</text>
</scroll-view>
<view class="uni-list">
<text style="margin-bottom: 4px"> 请选择定位服务提供商：</text>
<radio-group class="uni-flex uni-row" @change="providerChange" style="flex-wrap: wrap">
<radio class="uni-list-cell" style="margin-right: 15px" v-for="(item, index) in providerList" :key="item.id"
:value="item.id" :checked="index === currentSelectedProvider">
{{ item.name }}
</radio>
</radio-group>
</view>
<view class="uni-list">
<text style="margin-bottom: 4px"> 请选择坐标系：</text>
<radio-group class="uni-flex uni-row" @change="typeChange" style="flex-wrap: wrap">
<radio class="uni-list-cell" style="margin-right: 15px" v-for="(item, index) in types" :key="item.value"
:value="item.value" :checked="index === currentSelectedType">
{{ item.name }}
</radio>
</radio-group>
</view>
<scroll-view style="flex:1">
<!-- #endif -->
<button class="btnstyle" type="primary" @tap="startLocationUpdate" id="startLocationUpdate">点击连续定位</button>
<button class="btnstyle" type="primary" @tap="startLocationUpdateBackground"
id="startLocationUpdateBackground">后台点击连续定位</button>
<button class="btnstyle" type="primary" @tap="stopLocationUpdate" id="stopLocationUpdate">点击关闭定位</button>
<button class="btnstyle" type="primary" @tap="onLocationChange" id="onLocationChange">onLocationChange</button>
<button class="btnstyle" type="primary" @tap="offLocationChange" id="offLocationChange">offLocationChange</button>
<button class="btnstyle" type="primary" @tap="onLocationChangeError"
id="onLocationChangeError">onLocationChangeError</button>
<button class="btnstyle" type="primary" @tap="offLocationChangeError"
id="offLocationChangeError">offLocationChangeError</button>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
type LocationType = 'wgs84' | 'gcj02'
export type ItemType = { value : LocationType, name : LocationType }
export type LocationItem = { id : string, name : string, provider ?: UniProvider }
export default {
data() {
return {
log: "",
logAble: true,
providerList: [] as LocationItem[],
types: [
{
value: 'wgs84',
name: 'wgs84'
},
{
value: 'gcj02',
name: 'gcj02'
}
] as ItemType[],
currentSelectedProvider: 0,
currentSelectedType: 0,
startSuccess: false,
stopSuccess: false,
errCode: 0
}
},
onLoad: function () {
// #ifdef APP
this.getProvider()
// #endif
},
onUnload() {
uni.stopLocationUpdate({})
uni.offLocationChange(null)
uni.offLocationChangeError(null)
},
methods: {
getProvider() {
// #ifdef APP
let provider = uni.getProviderSync({
service: "location",
} as GetProviderSyncOptions)
console.log(provider)
provider.providerObjects.forEach((value : UniProvider) => {
var currentProvider = value
this.providerList.push({
name: currentProvider.description,
id: currentProvider.id,
provider: currentProvider
} as LocationItem);
})
this.providerList.forEach((value, index) => {
if (value.id == "system") {
this.currentSelectedProvider = index
}
})
// #endif
},
providerChange(e : UniRadioGroupChangeEvent) {
for (let i = 0; i < this.providerList.length; i++) {
if (this.providerList[i].id === e.detail.value) {
this.currentSelectedProvider = i;
break;
}
}
if (e.detail.value == "system") {
this.currentSelectedType = 0
} else if (e.detail.value == "tencent") {
this.currentSelectedType = 1
}
},
typeChange(e : UniRadioGroupChangeEvent) {
for (let i = 0; i < this.types.length; i++) {
if (this.types[i].value === e.detail.value) {
this.currentSelectedType = i;
break;
}
}
},
offLocationChangeError() {
if (this.logAble) {
this.log += "关闭offLocationChangeError监听" + '\n\n'
}
console.log("关闭onLocationChangeError监听")
uni.offLocationChangeError(null)
},
onLocationChangeError() {
uni.offLocationChangeError(null)
if (this.logAble) {
this.log += "开启onLocationChangeError监听" + '\n\n'
}
console.log("开启onLocationChangeError监听")
uni.onLocationChangeError((e) => {
console.log("onLocationChangeError回调: ", e)
if (this.logAble) {
this.log += JSON.stringify(e) + '\n\n'
}
})
},
onLocationChange() {
uni.offLocationChange(null)
console.log("开启onLocationChange监听")
if (this.logAble) {
this.log += "开启onLocationChange监听" + '\n\n'
}
uni.onLocationChange((e) => {
console.log("onLocationChange持续监听回调: ", e)
if (this.logAble) {
this.log += "provider= " + this.providerList[this.currentSelectedProvider].id + '\n' + JSON.stringify(e) + '\n\n'
}
})
},
offLocationChange() {
if (this.logAble) {
this.log += "关闭offLocationChange监听" + '\n\n'
}
console.log("关闭offLocationChange监听")
uni.offLocationChange(null)
},
startLocationUpdate() {
// #ifdef APP
if (this.providerList.length == 0) {
uni.showToast({
title: '未获取到provider，请确定基座中包含location功能',
icon: "error"
})
console.log("未获取到provider，请确定基座中包含location功能")
return
}
// #endif
uni.startLocationUpdate({
provider: this.providerList[this.currentSelectedProvider].id,
type: this.types[this.currentSelectedType].value,
success: () => {
if (this.logAble) {
this.log += "开启startLocationUpdate成功, provider= " + this.providerList[this.currentSelectedProvider].id + '\n\n'
}
console.log("持续定位启动成功")
this.startSuccess = true
},
fail: (err) => {
if (this.logAble) {
this.log += "启动startLocationUpdate失败：erroCode=" + err.errCode + '\n\n'
}
console.log("持续定位启动失败")
this.startSuccess = false
this.errCode = err.errCode
}
})
},
startLocationUpdateBackground() {
// #ifdef APP
if (this.providerList.length == 0) {
uni.showToast({
title: '未获取到provider，请确定基座中包含location功能',
icon: "error"
})
console.log("未获取到provider，请确定基座中包含location功能")
return
}
// #endif
uni.startLocationUpdateBackground({
provider: this.providerList[this.currentSelectedProvider].id,
type: this.types[this.currentSelectedType].value,
success: () => {
if (this.logAble) {
this.log += "开启startLocationUpdateBackground成功, provider= " + this.providerList[this.currentSelectedProvider].id + '\n\n'
}
console.log("后台持续定位api启动成功")
this.startSuccess = true
}, fail: (err) => {
if (this.logAble) {
this.log += "启动startLocationUpdateBackground失败：erroCode=" + err.errCode + '\n\n'
}
console.log("后台持续定位启动失败")
this.startSuccess = false
this.errCode = err.errCode
}
})
},
stopLocationUpdate() {
uni.stopLocationUpdate({
success: () => {
if (this.logAble) {
this.log += "成功关闭stopLocationUpdate定位" + '\n\n'
}
console.log("成功关闭stopLocationUpdate定位")
this.stopSuccess = true
}
})
}
}
}
</script>
<style>
.uni-list {
border-bottom: 0px;
background-color: transparent;
margin-left: 10px;
margin-right: 10px;
margin-top: 4px;
margin-bottom: 4px;
}
.uni-list-cell {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.btnstyle {
margin: 4px;
}
</style>
