// 由于這里進行了一些api的封裝，可參考代碼
// https://www.jianshu.com/p/80e33d16182f??

//引用的一些方法放下面了，我一般都是封裝到單獨的js文件引進來

//GetAddress.js? 引入使用放在最底部

//一、這里是獲取經緯度（包括調取用戶設置，對用戶設置的判斷）
export default async function wxGetLocation() {
?? ?try {
?? ??? ?//小程序獲取地理位置
?? ??? ?let result = await getLocationApi({})
?? ??? ?return result
?? ?} catch (err) {
?? ??? ?let scope = 'scope.userLocation'
?? ??? ?let setting = await wxGetSetting() //獲取用戶的當前設置
?? ??? ?if (!setting[scope]) {
?? ??? ??? ?let result = await showModalApi({
?? ??? ??? ??? ?content: '您拒絕了定位權限，將無法正常使用此功能',
?? ??? ??? ??? ?confirmText: '去開啟'
?? ??? ??? ?})
?? ??? ??? ?if (result.confirm) {
?? ??? ??? ??? ?let auth = await wxOpenSetting()
?? ??? ??? ??? ?if (auth.authSetting[scope]) {
?? ??? ??? ??? ??? ?let result = await getLocationApi({})
?? ??? ??? ??? ??? ?return result
?? ??? ??? ??? ?}
?? ??? ??? ??? ?showToastApi({
?? ??? ??? ??? ??? ?title: '您拒絕了定位權限'
?? ??? ??? ??? ?})
?? ??? ??? ??? ?return false
?? ??? ??? ?}
?? ??? ??? ?return false
?? ??? ?}
?? ?}
}

//二、這里把經緯度轉成地址

import {//返回非經緯度地址
?? ?AMAPKEY
} from "@/common/config.js"
const amapFile = require('./amap-wx.130.js') //這里引入高德地圖
const myAmapFun = new amapFile.AMapWX({
?? ?key: AMAPKEY
});
export default function wxGetAddress({
?? ?longitude,
?? ?latitude
}) {
?? ?return new Promise((resolve, reject) => {
?? ??? ?myAmapFun.getRegeo({
?? ??? ??? ?location: `${longitude},${latitude}`,
?? ??? ??? ?success: (res) => {
?? ??? ??? ??? ?resolve(res[0])
?? ??? ??? ?},
?? ??? ??? ?fail: (err) => {
?? ??? ??? ??? ?resolve(null)
?? ??? ??? ?}
?? ??? ?})
?? ?})
}

function wxGetSetting() {//獲取用戶的當前設置
?? ?return new Promise((resovle, reject) => {
?? ??? ?uni.getSetting({
?? ??? ??? ?success: (res) => {
?? ??? ??? ??? ?resovle(res.authSetting)
?? ??? ??? ?},
?? ??? ??? ?fail: (err) => {
?? ??? ??? ??? ?reject(err)
?? ??? ??? ?}
?? ??? ?})
?? ?})
}

?function wxOpenSetting() {//調起客戶端小程序設置界面，返回用戶設置的操作結果。
?? ?return new Promise((resovle, reject) => {
?? ??? ?uni.openSetting({
?? ??? ??? ?success: (res) => {
?? ??? ??? ??? ?resovle(res)
?? ??? ??? ?}
?? ??? ?})
?? ?})
}

function getLocationApi({//獲取用戶經緯度
?? ?type = 'gcj02',
?? ?altitude = false,
?? ?geocode = false,
?? ?isHighAccuracy = false
}) {
?? ?return new Promise((resovle, reject) => {
?? ??? ?uni.getLocation({?
?? ??? ??? ?type,//返回坐標形式
?? ??? ??? ?altitude,//傳入 true 會返回高度信息，由于獲取高度需要較高精確度，會減慢接口返回速度
?? ??? ??? ?geocode,//默認false，是否解析地址信息
?? ??? ??? ?isHighAccuracy,//開啟高精度定位
?? ??? ??? ?success: res => {
?? ??? ??? ??? ?resovle(res)
?? ??? ??? ?},
?? ??? ??? ?fail: (err) => {
?? ??? ??? ??? ?reject(err)
?? ??? ??? ?}
?? ??? ?});
?? ?})
}

?function showModalApi({//消息提示框操作框
?? ?title = '提示', //?? ?String?? ?否?? ?提示的標題?? ?
?? ?content = 'content', //?? ?String?? ?否?? ?提示的內容?? ?
?? ?showCancel = true, //?? ?Boolean?? ?否?? ?是否顯示取消按鈕，默認為 true?? ?
?? ?cancelText = '取消', //?? ?String?? ?否?? ?取消按鈕的文字，默認為"取消"?? ?
?? ?cancelColor = '#000000', //?? ?HexColor?? ?否?? ?取消按鈕的文字顏色，默認為"#000000"?? ?H5、微信小程序、百度小程序
?? ?confirmText = '確定', //?? ?String?? ?否?? ?確定按鈕的文字，默認為"確定"
?? ?confirmColor = '#576B95', //HexColor 否 確定按鈕的文字顏色
?? ?editable = false, //?? ?Boolean?? ?否?? ?是否顯示輸入框?? ?H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)
?? ?placeholderText = '', //?? ?String?? ?否?? ?顯示輸入框時的提示文本?? ?H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)?
}) {
?? ?return new Promise((resovle, reject) => {
?? ??? ?uni.showModal({
?? ??? ??? ?title,
?? ??? ??? ?content,
?? ??? ??? ?showCancel,
?? ??? ??? ?cancelText,
?? ??? ??? ?cancelColor,
?? ??? ??? ?confirmText,
?? ??? ??? ?confirmColor,
?? ??? ??? ?editable,
?? ??? ??? ?placeholderText,
?? ??? ??? ?success: (res) => {
?? ??? ??? ??? ?resovle(res)
?? ??? ??? ?},
?? ??? ??? ?fail: (err) => {
?? ??? ??? ??? ?reject(err);
?? ??? ??? ?}
?? ??? ?});
?? ?})
}

function showToastApi({//消息提示框
?? ?title = 'message', //String?? ?是?? ?提示的內容，長度與 icon 取值有關。?? ?
?? ?icon = 'none', //?? ?String?? ?否?? ?圖標，有效值詳見下方說明。?? ?
?? ?image = '', //?? ?String?? ?否?? ?自定義圖標的本地路徑（app端暫不支持gif）?? ?App、H5、微信小程序、百度小程序
?? ?mask = false, //?? ?Boolean?? ?否?? ?是否顯示透明蒙層，防止觸摸穿透，默認：false?? ?App、微信小程序
?? ?duration = 1500, //Number?? ?否?? ?提示的延遲時間，單位毫秒，默認：1500?? ?
?? ?position = 'center', //?? ?String?? ?否?? ?純文本輕提示顯示位置，填寫有效值后只有 title 屬性生效， 有效值詳見下方說明。?? ?App

}) {
?? ?uni.showToast({
?? ??? ?title,
?? ??? ?icon,
?? ??? ?image,
?? ??? ?mask,
?? ??? ?duration,
?? ??? ?position,
?? ??? ?success: (res) => {
?? ??? ??? ?envlog({
?? ??? ??? ??? ?msg: res
?? ??? ??? ?})
?? ??? ?},
?? ??? ?fail: (err) => {
?? ??? ??? ?envlog({
?? ??? ??? ??? ?msg: err
?? ??? ??? ?})
?? ??? ?}
?? ?});
}
?

//三、使用GetAddress.js獲取地址和經緯度

//test.vue

import { wxGetLocation, wxGetAddress } from './GetAddress.js';

?? ?data() {
?? ??? ?return {
?? ??? ??? ?address: '',
?? ??? ??? ?longitude:'',
?? ??? ??? ?latitude:'',
?? ??? ?};
?? ?},

?? ?async onLoad() {//獲取地址，并進行地址編碼
?? ??? ?let result = await wxGetLocation();
?? ??? ?if (result) {
?? ??? ??? ?this.longitude=result.longitude//經度
?? ??? ??? ?this.latitude=result.latitude//緯度
?? ??? ??? ?let address = await wxGetAddress({ longitude: result.longitude, latitude: result.latitude });
?? ??? ??? ?this.address = `${address.name || ''}${address.desc || ''}`;//地址
?? ??? ?}
?? ?},

總結

以上是生活随笔為你收集整理的小程序uniapp获取经纬度、地址的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。