目前，我們可以通過一些現(xiàn)成的api來實現(xiàn)此功能。下面我將介紹一下通過騰訊位置服務(wù)來實現(xiàn)此功能的具體操作流程。
1、在Hbuilder x中對項目進行權(quán)限開放
進入到manifest.json文件中
?
2、獲取調(diào)用騰訊位置服務(wù)所需的key
- 登錄騰訊地圖api： 騰訊位置服務(wù) - 立足生態(tài)，連接未來
- 點擊控制臺--》應(yīng)用管理--》我的應(yīng)用--》添加Key---》填寫內(nèi)容--》添加
3、進入騰訊地圖文檔下載JavaScriptSDK ? ? [微信小程序JavaScript SDK | 騰訊位置服務(wù) (qq.com)](https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview)
4、解壓剛下好的JavaScriptSDK
5、將min.js文件復(fù)制到項目static文件目錄下
?6、實現(xiàn)定位服務(wù)代碼文章來源：http://www.zghlxwxcb.cn/news/detail-484610.html
- ?Vuex配置
// 引入騰訊地圖jssdk文件
import QQMapWX from "../static/js/qqmap-wx-jssdk.min.js"
export default {
// 為當前模塊開啟命名空間
namespaced: true,
state: {
// 默認城市
city: '北京市',
//當前位置的經(jīng)緯度
x: 0,
y: 0
},
mutations: {
newCityFun(state, newCity) {
state.city = newCity
console.log(newCity)
console.log(state.city)
},
getCity() {
var that = this
// 獲取用戶是否開啟 授權(quán)獲取當前的地理位置、速度的權(quán)限。
uni.getSetting({
success(res) {
console.log(res)
// 如果沒有授權(quán)
if (!res.authSetting['scope.userLocation']) {
// 則拉起授權(quán)窗口
uni.authorize({
scope: 'scope.userLocation',
success() {
let qqmapsdk = new QQMapWX({
key: 'JOMBZ-MRF6U-GF2V3-BSKNG-757GO-O7FLR'
});
//點擊允許后--就一直會進入成功授權(quán)的回調(diào) 就可以使用獲取的方法了
uni.getLocation({
type: 'wgs84',
success: function(res) {
that.x = res.longitude
that.y = res.latitude
console.log("if", res)
console.log('當前位置的經(jīng)度：' + res.longitude)
console.log('當前位置的緯度：' + res.latitude)
// 逆地址解析方法
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success(res) {
var newCity = ''
console.log(res)
// 取到用戶的定位城市，賦值傳遞出去
newCity = res.result
.address_component.city
// that.commit('m_location/newCityFun')
}
})
uni.showToast({
title: '當前位置的經(jīng)緯度：' + res.longitude +
',' + res.latitude,
icon: 'success',
mask: true
})
},
fail(error) {
console.log('失敗', error)
}
})
},
fail(error) {
//點擊了拒絕授權(quán)后--就一直會進入失敗回調(diào)函數(shù)--此時就可以在這里重新拉起授權(quán)窗口
console.log('拒絕授權(quán)', error)
uni.showModal({
title: '提示',
content: '若點擊不授權(quán)，將無法使用位置功能',
cancelText: '不授權(quán)',
cancelColor: '#999',
confirmText: '授權(quán)',
confirmColor: '#f94218',
success(res) {
console.log(res)
if (res.confirm) {
// 選擇彈框內(nèi)授權(quán)
uni.openSetting({
success(res) {
console.log(res.authSetting)
}
})
} else if (res.cancel) {
// 選擇彈框內(nèi) 不授權(quán)
console.log('用戶點擊不授權(quán)')
}
}
})
}
})
} else {
let qqmapsdk = new QQMapWX({
key: 'JOMBZ-MRF6U-GF2V3-BSKNG-757GO-O7FLR'
});
// 有權(quán)限則直接獲取
uni.getLocation({
type: 'wgs84',
success: function(res) {
that.x = res.longitude
that.y = res.latitude
console.log("else", res)
console.log('當前位置的經(jīng)度：' + res.longitude)
console.log('當前位置的緯度：' + res.latitude)
// 逆地址解析方法
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success(res) {
var newCity = ''
console.log(res)
// 取到用戶的定位城市，賦值傳遞出去
newCity = res.result.address_component.city
// that.commit('m_location/newCityFun')
},
fail(res) {
console.log("錯誤", res)
}
})
//打開地圖
uni.openLocation({
latitude: that.y,
longitude: that.x,
success: function() {}
});
uni.showToast({
title: '當前位置的經(jīng)緯度：' + res.longitude + ',' + res.latitude,
icon: 'success',
mask: true
})
},
fail(error) {
uni.showToast({
title: '請勿頻繁調(diào)用！',
icon: 'none',
})
console.log('失敗', error)
}
})
}
}
})
}
},
actions: {
}
}注意：需將以上代碼中的key，換成自己剛剛配置的key。文章來源地址http://www.zghlxwxcb.cn/news/detail-484610.html
let qqmapsdk = new QQMapWX({
key: 'JOMBZ-MRF6U-GF2V3-BSKNG-757GO-O7FLR'
});- 頁面配置
<template>
<view>{{addstr}}</view>
</template>
<script>
import {
mapState,
mapMutations,
mapGetters,
mapActions
} from 'vuex'
export default {
data() {
return {
title: 'Hello',
}
},
onReady() {
// 把m_location模塊中的 getCity 函數(shù)映射到當前組件
this.getCity()
},
methods: {
...mapMutations('m_location', ['getCity']),
},
computed: {
// 從getter中引入addstr
...mapGetters('m_location', ['addstr'])
}
}
</script>到了這里，關(guān)于uniapp實現(xiàn)微信小程序用戶實時位置定位并顯示地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
