uniapp使用uni.chooseLocation()打開地圖選擇位置詳解
更新時間：2023年06月30日 09:28:43 作者：哇，女前端哎！
這篇文章主要給大家介紹了關于uniapp使用uni.chooseLocation()打開地圖選擇位置的相關資料,因為最近在項目中遇到一個要用戶授權位置且可以用戶自己選擇位置的功能,需要的朋友可以參考下
使用uni.chooseLocation()打開地址選擇位置
1、打開微信開發(fā)平臺申請權限
【開發(fā)】–【開發(fā)管理】–【接口設置】–點擊去開通，開通之后才可以使用。
2、對小程序進行設置
“requiredPrivateInfos”:[“chooseLocation”]
1.第一種在 uniapp進行設置
2.第二種在原生微信小程序上設置
3、在app.vue里添加微信用戶授權
onLaunch: function() {
uni.authorize({
scope: 'scope.userLocation',
success: function () {
console.log('用戶同意了授權')
}
})
},4、在頁面調起地圖選擇
<template>
<view class="content">
<button @tap="authVerification">請選擇位置</button>
<template v-if="currentLocation.address">
<div>name：{{currentLocation.name}}</div>
<div>address：{{currentLocation.address}}</div>
<div>latitude：{{currentLocation.latitude}}</div>
<div>longitude：{{currentLocation.longitude}}</div>
</template>
</view>
</template>
<script>
export default {
data() {
return {
currentLocation:{},
}
},
onShow () {
uni.getStorage({
key: 'currentLocation',
success: (res) => {
this.currentLocation = res.data
}
})
},
methods: {
authVerification () {
uni.getSetting({
success: (res) => {
if (res.authSetting['scope.userLocation']) { /* 用戶授權成功時走這里 */
this.handerChooseLocation()
} else if (res.authSetting['scope.userLocation'] === undefined) { /* 用戶未授權時走這里 */
console.log('沒有授權')
this.handleOpenSetting()
} else { /* 用戶拒絕了授權后走這里 */
console.log('拒絕了授權 false')
this.handleOpenSetting()
}
},
})
},
handerChooseLocation (latitude, longitude) {
uni.chooseLocation({
latitude: latitude || '',
longitude: longitude || '',
success: (res) => {
console.log('wx.chooseLocation res=', res)
uni.setStorageSync('currentLocation', res)
},
fail: function (err) {
console.log('取消按鈕', err)
}
})
},
handleOpenSetting () {
wx.openSetting({
success: (res) => {
console.log('定位 openSetting', res)
if (res.authSetting["scope.userLocation"]) {
this.handerChooseLocation()
}
}
})
}
}
}
</script>總結
到此這篇關于uniapp使用uni.chooseLocation()打開地圖選擇位置的文章就介紹到這了,更多相關uniapp打開地圖選擇位置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了詳解webpack 最簡打包結果分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
JavaScript 是一種強大但被誤解的語言。關于它到底是一種面向對象的語言還是函數(shù)式語言，人們眾說紛紜——但是現(xiàn)在讓我們把這些爭辯都拋到腦后。2014-07-07
本文主要介紹了JavaScript 類型轉換的詳細實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了微信小程序實現(xiàn)比較功能的方法，本文給大家列舉出五種方式，每種方法通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了關于base64編碼和解碼的js工具函數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了js實現(xiàn)當復選框選擇匿名登錄時隱藏登錄框效果,實例分析了javascript動態(tài)操作頁面元素樣式的相關技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
這篇文章介紹了js操作checkbox遇到的問題解決，有需要的朋友可以參考一下2013-06-06
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)秒殺時鐘倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
發(fā)表文章時自動保存到剪貼板...2006-10-10
下面小編就為大家?guī)硪黄狫s操作DOM元素及獲取瀏覽器高寬的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09