欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何使用uniapp開發(fā)微信小程序獲取當前位置詳解

 更新時間：2022年10月12日 09:12:56   作者：xian'xiao  
uni-app小程序項目無法直接獲取到地理位置,只能通過獲取到的經(jīng)緯度,調(diào)用第三方地圖Api獲取,下面這篇文章主要給大家介紹了關(guān)于如何使用uniapp開發(fā)微信小程序獲取當前位置的相關(guān)資料,需要的朋友可以參考下

前言

  • 使用uniapp開發(fā)微信小程序時，多多少少會遇到獲取當前位置的詳細信息（比如：xxx省xxx市），uniapp提供了一個名為uni.getLocation()。仔細觀察文檔你就會發(fā)現(xiàn)，在success中只有經(jīng)緯度信息，在app端success中才會有一個address字段（其中就包含詳細的地址信息等）
  • 現(xiàn)在是微信小程序需要使用具體的位置信息怎么半？不得陷入沉思和罵***，廢話不多說開整
  • 前提是，你的微信小程序具有定位功能，這個非常重要?。?！

一、配置

1、進入mainfest.json文件配置permission塊

意思就是進mainfestison里的微信小程序配置，勾選位置接口

2、進入微信公眾平臺添加合法域名

tip：盡量不要跳過，這一步跳過可能會出現(xiàn)在微信開發(fā)者工具預覽小程序時能夠獲取到位置，但是在手機微信中預覽小程序就獲取失敗

進入微信公眾平臺

進入當前開發(fā)的項目中 一一 開發(fā) 一一 開發(fā)管理 一一 開發(fā)設(shè)置 一一 服務(wù)器域名 一一 request合法域名 一一 添加域名

https://restapi.amap.com   //高德合法域名

3、高德SDK文件下載

高德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, '當前定位');
            
            _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ā)微信小程序獲取當前位置的文章就介紹到這了,更多相關(guān)uniapp微信小程序獲取當前位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論