83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<button type="primary" @click="open">开始定位(已获取{{count}}次)</button>
|
||
|
|
<button type="primary" @click="close">停止定位</button>
|
||
|
|
<view v-for="(item, index) in list" :key="index" :class="item.type==0?'green': 'red'">
|
||
|
|
<view>{{item.a}}</view>
|
||
|
|
<view style="color: #333;">{{item.b}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import addKeepalive from '../../uni_modules/fdm-keepalive'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [],
|
||
|
|
timer: null,
|
||
|
|
count: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
addKeepalive()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
open(){
|
||
|
|
if(this.timer){
|
||
|
|
clearInterval(this.timer);
|
||
|
|
}else {
|
||
|
|
this.count++;
|
||
|
|
this.getAddress();
|
||
|
|
this.timer = setInterval(()=>{
|
||
|
|
this.count++;
|
||
|
|
this.getAddress();
|
||
|
|
}, 6*1000);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
close(){
|
||
|
|
clearInterval(this.timer);
|
||
|
|
},
|
||
|
|
getAddress(){
|
||
|
|
uni.getLocation({
|
||
|
|
geocode: true,
|
||
|
|
success:(res)=>{
|
||
|
|
console.log(res);
|
||
|
|
this.list.push({
|
||
|
|
type: 0,
|
||
|
|
a: '获取成功: '+this.formatDate(new Date()),
|
||
|
|
b: '位置：' + res.latitude + ',' + res.longitude
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail:(err)=> {
|
||
|
|
this.list.push({
|
||
|
|
type: 1,
|
||
|
|
a: '获取失败: '+this.formatDate(new Date()),
|
||
|
|
b: '错误:' + JSON.stringify(err)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
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}`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.green{
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
.red{
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
</style>
|