如何使用uniapp開發(fā)微信小程序獲取當(dāng)前位置詳解
更新時間：2022年10月12日 09:12:56 作者：xian'xiao
uni-app小程序項目無法直接獲取到地理位置,只能通過獲取到的經(jīng)緯度,調(diào)用第三方地圖Api獲取,下面這篇文章主要給大家介紹了關(guān)于如何使用uniapp開發(fā)微信小程序獲取當(dāng)前位置的相關(guān)資料,需要的朋友可以參考下
前言
- 使用uniapp開發(fā)微信小程序時，多多少少會遇到獲取當(dāng)前位置的詳細(xì)信息（比如：xxx省xxx市），uniapp提供了一個名為uni.getLocation()。仔細(xì)觀察文檔你就會發(fā)現(xiàn)，在success中只有經(jīng)緯度信息，在app端success中才會有一個address字段（其中就包含詳細(xì)的地址信息等）
- 現(xiàn)在是微信小程序需要使用具體的位置信息怎么半？不得陷入沉思和罵***，廢話不多說開整
- 前提是，你的微信小程序具有定位功能，這個非常重要?。?！
一、配置
1、進(jìn)入mainfest.json文件配置permission塊
意思就是進(jìn)mainfestison里的微信小程序配置，勾選位置接口
2、進(jìn)入微信公眾平臺添加合法域名
tip：盡量不要跳過，這一步跳過可能會出現(xiàn)在微信開發(fā)者工具預(yù)覽小程序時能夠獲取到位置，但是在手機(jī)微信中預(yù)覽小程序就獲取失敗
進(jìn)入當(dāng)前開發(fā)的項目中 一一 開發(fā) 一一 開發(fā)管理 一一 開發(fā)設(shè)置 一一 服務(wù)器域名 一一 request合法域名 一一 添加域名
https://restapi.amap.com //高德合法域名
3、高德SDK文件下載
在解壓后可以獲取到一個js文件 ( amap-wx.130.js )，并且將改文件存放在項目中的靜態(tài)文件中
二、使用步驟 （直接封裝組件）
1.在組件中引入amap-wx.130.js文件
代碼如下（示例）：
import amap from '@/static/js/amap-wx.130.js';
2.在data中定義
data() {
return {
amapPlugin: null,
gaodekey: '386b29f376fca00a839e43060d0c829f', //高德key,此處的key需要去高德平臺申請獲取，此key是假的！??！
address: "", // 已經(jīng)獲取到的位置
}
}
3.在created中定義
created() {
this.amapPlugin = new amap.AMapWX({
key: this.gaodekey
});
this.getLocation();
},
4.在methods中定義
getLocation() {
const _this = this;
this.amapPlugin = new amap.AMapWX({
key: this.gaodekey
});
uni.showLoading({
title: '獲取信息中'
});
// 成功獲取位置
_this.amapPlugin.getRegeo({
success: (data) => {
console.log(data, '當(dāng)前定位');
_this.address =`${data[0].regeocodeData.addressComponent.city}${data[0].regeocodeData.addressComponent.district}`;
// _this.address 可根據(jù)自己的實際情況修改
_this.address = `${data[0].regeocodeData.formatted_address}`;
// 傳出
_this.$emit("lodAddress",_this.address)
uni.hideLoading();
},
// 獲取位置失敗
fail: (err) => {
uni.showToast({
title: "獲取位置失敗，請重啟小程序",
icon: "error"
})
}
});
},
5.在你需要使用的vue頁面調(diào)用改組件
// 調(diào)用組件
<position-infor @lodAddress="getLocation()"></position-infor>
methods(){
// 頁面加載就會觸發(fā)
getLocation(address){
// address就是組件傳出的具體位置
console.log(address);
this.address = address;
}
}總結(jié)
實現(xiàn)此功能，你的微信小程序項目必須具有定位功能，沒有的話還得去微信平臺申請。二就是必須擁有一個高德的key，沒有也需要申請。三就是需要借助高德的amap-wx.130.js文件，以上就是本人想說的所有東西~
到此這篇關(guān)于如何使用uniapp開發(fā)微信小程序獲取當(dāng)前位置的文章就介紹到這了,更多相關(guān)uniapp微信小程序獲取當(dāng)前位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了前端開發(fā)之CSS原理詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
js傳各種類型參數(shù)到Controller層的整理方式
這篇文章主要介紹了js傳各種類型參數(shù)到Controller層的整理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細(xì)介紹了JS基于VUE組件實現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
有時我們可能需要在多個環(huán)境下對同一個接口進(jìn)行測試。比如我們請求的域名,開發(fā)、測試、生產(chǎn)環(huán)境,請求參數(shù)。文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了JS 實現(xiàn)緩存算法的示例（FIFO/LRU）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
最近重新溫習(xí)了一次《javascript設(shè)計模式》，確實是一本好書，每次看都有不同的領(lǐng)悟，每次領(lǐng)悟到的都受益匪淺，無怪古圣人都說學(xué)無止鏡了，僅以“加油，好嗎？”共勉！2009-10-10
javascript:void(0)點擊登錄沒反應(yīng)怎么解決
這篇文章給大家介紹javascript:void(0)點擊登錄沒反應(yīng)怎么解決，解決辦法是巧用批處理解決IE不支持JavaScript等問題，需要的朋友參考下2015-11-11
JS數(shù)字千分位格式化實現(xiàn)方法總結(jié)
這篇文章主要介紹了JS數(shù)字千分位格式化實現(xiàn)方法,結(jié)合實例形式總結(jié)分析了JS實現(xiàn)數(shù)字千分位格式化的常用技巧,包括字符串的分割、拼接、遍歷及正則操作等相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-12-12
如何在JavaScript中使用map()迭代數(shù)組詳細(xì)步驟
在JavaScript中循環(huán)迭代數(shù)組的方法有很多種,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中使用map()迭代數(shù)組的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
JavaScript中常用的3種彈出提示框(alert、confirm、prompt)
這篇文章主要給大家介紹了關(guān)于JavaScript中常用的3種彈出提示框(alert、confirm、prompt)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11