定位功能在移動應用開發中非常常見,Vue和Cordova結合可以方便地實現定位功能。
首先需要安裝cordova-plugin-geolocation插件,可以使用如下命令安裝:
cordova plugin add cordova-plugin-geolocation
在Vue組件中需要先引入cordova,然后在created方法中調用cordova的相關方法來獲取定位信息:
import Vue from 'vue'
import {Geolocation} from '@ionic-native/geolocation'
Vue.prototype.$cordovaGeolocation = Geolocation
export default {
created () {
this.$cordovaGeolocation.getCurrentPosition().then(position =>{
// position包含經緯度等定位信息
console.log('getCurrentPosition success', position)
}).catch(err =>{
console.log('getCurrentPosition failed', err)
})
}
}
上述代碼會在組件創建時立即獲取當前位置,也可以在需要時手動調用方法獲取位置信息。
除了getCurrentPosition方法,也可以使用watchPosition方法來持續監聽位置變化,示例代碼如下:
watchId = null
created () {
this.watchId = this.$cordovaGeolocation.watchPosition().subscribe(position =>{
// position包含經緯度等定位信息
console.log('watchPosition success', position)
}, err =>{
console.log('watchPosition failed', err)
})
}
beforeDestroy () {
if (this.watchId) {
this.watchId.unsubscribe()
}
}
上述代碼會在組件創建時開始持續監聽位置變化,并在組件銷毀前取消監聽。