亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

前言

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

一、配置

1、進(jìn)入mainfest.json文件配置permission塊

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

2、進(jìn)入微信公眾平臺(tái)添加合法域名

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

進(jìn)入微信公眾平臺(tái)

進(jìn)入當(dāng)前開(kāi)發(fā)的項(xiàng)目中 一一 開(kāi)發(fā) 一一 開(kāi)發(fā)管理 一一 開(kāi)發(fā)設(shè)置 一一 服務(wù)器域名 一一 request合法域名 一一 添加域名

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

3、高德SDK文件下載

高德SDK文件下載

在解壓后可以獲取到一個(gè)js文件 ( amap-wx.130.js )，并且將改文件存放在項(xiàng)目中的靜態(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需要去高德平臺(tái)申請(qǐng)獲取，此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ù)自己的實(shí)際情況修改
            _this.address = `${data[0].regeocodeData.formatted_address}`;
			// 傳出
            _this.$emit("lodAddress",_this.address)
            uni.hideLoading();
        },
        // 獲取位置失敗
        fail: (err) => {
            uni.showToast({
                title: "獲取位置失敗，請(qǐng)重啟小程序",
                icon: "error"
            })
        }
    });
},

5.在你需要使用的vue頁(yè)面調(diào)用改組件

// 調(diào)用組件
<position-infor @lodAddress="getLocation()"></position-infor>

methods(){
	// 頁(yè)面加載就會(huì)觸發(fā)
	getLocation(address){
    	// address就是組件傳出的具體位置
    	console.log(address);
    	this.address = address;
	}
}

總結(jié)

實(shí)現(xiàn)此功能，你的微信小程序項(xiàng)目必須具有定位功能，沒(méi)有的話還得去微信平臺(tái)申請(qǐng)。二就是必須擁有一個(gè)高德的key，沒(méi)有也需要申請(qǐng)。三就是需要借助高德的amap-wx.130.js文件，以上就是本人想說(shuō)的所有東西~

到此這篇關(guān)于如何使用uniapp開(kāi)發(fā)微信小程序獲取當(dāng)前位置的文章就介紹到這了,更多相關(guān)uniapp微信小程序獲取當(dāng)前位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論