uniapp 開發微信小程序，獲取經緯度并且轉化詳細地址（單獨封裝版本）

1、單獨抽離封裝

// 騰訊地圖SDK引入（需提前下載qqmap-wx-jssdk.min.js文件）
// 注意：使用前需在微信公眾平臺配置request合法域名https://apis.map.qq.com
var QQMapWX = require('@/libs/qqmap-wx-jssdk.min.js')// 高德地圖SDK引入（需提前下載amap-wx.130.js文件）
// 注意：使用前需配置高德域名白名單https://restapi.amap.com
import amap from '@/libs/amap-wx.130.js';/*** 地圖服務配置常量* 建議通過構建工具注入環境變量，避免硬編碼* AMAP_KEY：高德開發者密鑰（需到lbs.amap.com申請）* QQMAP_KEY：騰訊地圖開發者密鑰（需到lbs.qq.com申請）*/
const MAP_CONFIG = {AMAP_KEY: '', // 您的高德地圖Key QQMAP_KEY: '' // 您的騰訊地圖Key
}/*** 定位服務核心類* 功能：封裝高德/騰訊地圖的定位和逆地理編碼能力* 特點：* 1. 雙地圖服務支持（自動根據配置初始化）* 2. 完整的權限控制流程* 3. 統一的數據格式返回*/
export default class LocationService {constructor() {this.amapPlugin = null // 高德地圖實例this.qqmapsdk = null // 騰訊地圖實例this._initSDK() // 自動初始化SDK}/*** 初始化地圖SDK（私有方法）* 注意：會根據MAP_CONFIG配置自動初始化可用SDK* 高德地圖需額外配置Geocoder插件用于逆地理編碼*/_initSDK() {// 高德地圖初始化（需同時滿足SDK存在且配置了有效KEY）if (typeof amap !== 'undefined' && MAP_CONFIG.AMAP_KEY) {this.amapPlugin = new amap.AMapWX({key: MAP_CONFIG.AMAP_KEY,// plugin: ['AMap.Geocoder'] // 必須添加地理編碼插件})}// 騰訊地圖初始化（需同時滿足SDK存在且配置了有效KEY）if (typeof QQMapWX !== 'undefined' && MAP_CONFIG.QQMAP_KEY) {this.qqmapsdk = new QQMapWX({key: MAP_CONFIG.QQMAP_KEY})}}/*** 統一權限檢查流程（私有方法）* 三階段處理：* 1. 檢查已有權限* 2. 無權限時請求授權（每次拒絕后下次仍會觸發系統彈窗）* 3. 授權被拒時引導用戶去設置頁*/async _checkPermission() {return new Promise((resolve, reject) => {uni.getSetting({success: (res) => {// 已有權限直接通過if (res.authSetting['scope.userLocation'] === true) {resolve(true)} else {// 1. 先請求授權// uni.authorize：用于?首次請求權限?，彈窗詢問用戶是否允許獲取位置uni.authorize({scope: 'scope.userLocation',success: () => resolve(true),fail: (err) => {// 引導去設置頁（不阻止后續再次觸發系統彈窗）this._showPermissionModal().finally(() => {reject(new Error('PERMISSION_DENIED'))})}})}},fail: reject})})}/*** 顯示權限引導彈窗（私有方法）* 增強功能：用戶從設置頁返回后自動嘗試獲取定位*/_showPermissionModal() {return new Promise((resolve) => {uni.showModal({title: '權限提示',content: '需要位置權限才能獲取定位信息',confirmText: '去設置',success: (res) => {if (res.confirm) {uni.openSetting({success: (settingRes) => {// 設置頁返回后檢查權限狀態if (settingRes.authSetting['scope.userLocation']) {resolve(true) // 權限已開啟} else {resolve(false) // 用戶未開啟權限}},fail: () => resolve(false)})} else {resolve(false)}}})})}/*** 獲取基礎坐標（核心方法）* 增強功能：支持從設置頁返回后自動獲取坐標* @param {Object} options 配置項*        - altitude: 是否獲取海拔高度（默認false）*        - highAccuracy: 是否啟用高精度模式（耗電增加）* @returns {Promise} 包含經緯度等信息的Promise*/async getCoordinates(options = {}) {try {// 檢查權限（包含引導設置流程）const hasPermission = await this._checkPermission()if (!hasPermission) throw new Error('PERMISSION_DENIED')return new Promise((resolve, reject) => {// 2. 授權成功后獲取高精度坐標// uni.getLocation：?實際獲取坐標?，需在權限通過后調用uni.getLocation({// wgs84：國際標準GPS坐標系（原始經緯度數據）// gcj02：中國國測局坐標系（高德/騰訊地圖專用）type: 'gcj02',altitude: !!options.altitude,isHighAccuracy: !!options.highAccuracy, //高精度模式(isHighAccuracy:true)會增加功耗，建議按需使用success: (res) => {resolve({longitude: res.longitude,latitude: res.latitude,altitude: res.altitude || null,accuracy: res.accuracy,verticalAccuracy: res.verticalAccuracy || null})},fail: (err) => {console.log('err-----授權', err)// 特殊處理用戶從設置頁返回的情況if (err.errMsg.includes('auth deny')) {this.getCoordinates(options).then(resolve).catch(reject)} else {reject((err))}}})})} catch (err) {throw (err)}}/*** 獲取高德地圖地址信息（核心方法）* 流程：獲取坐標 -> 調用高德逆地理編碼接口* 注意：需提前配置高德域名白名單*/async getAMapAddress(options = {}) {if (!this.amapPlugin) {throw new Error('AMAP_SDK_NOT_INIT')}try {// 先獲取基礎坐標const coords = await this.getCoordinates(options)return new Promise((resolve, reject) => {// 調用高德逆地理編碼接口this.amapPlugin.getRegeo({location: `${coords.longitude},${coords.latitude}`,success: (data) => {resolve(this._formatAMapData(data, coords))},fail: (err) => reject(err)})})} catch (err) {throw (err)}}/*** 獲取騰訊地圖地址信息（核心方法）* 流程：獲取坐標 -> 調用騰訊逆地理編碼接口* 注意：需提前配置騰訊地圖域名白名單*/async getQQMapAddress(options = {}) {if (!this.qqmapsdk) {throw new Error('QQMAP_SDK_NOT_INIT')}try {// 先獲取基礎坐標const coords = await this.getCoordinates(options)return new Promise((resolve, reject) => {// 調用騰訊逆地理編碼接口this.qqmapsdk.reverseGeocoder({location: {latitude: coords.latitude,longitude: coords.longitude},get_poi: options.includePOI || false, // 是否返回周邊POI信息success: (res) => {resolve(this._formatQQMapData(res, coords))},fail: (err) => reject(err)})})} catch (err) {throw (err)}}// 新增：通過坐標獲取高德地址信息async getAMapByCoordinates(lng, lat, options = {}) {if (!this.amapPlugin) throw new Error('AMAP_SDK_NOT_INIT')return new Promise((resolve, reject) => {this.amapPlugin.getRegeo({location: `${lng},${lat}`,success: (data) => resolve(this._formatAMapData(data, {longitude: lng,latitude: lat})),fail: reject})})}// 新增：通過坐標獲取騰訊地址信息async getQQMapByCoordinates(lng, lat, options = {}) {if (!this.qqmapsdk) throw new Error('QQMAP_SDK_NOT_INIT')return new Promise((resolve, reject) => {this.qqmapsdk.reverseGeocoder({location: {latitude: lat,longitude: lng},get_poi: options.includePOI || false,success: (res) => resolve(this._formatQQMapData(res, {longitude: lng,latitude: lat})),fail: reject})})}/*** 格式化高德地圖返回數據（私有方法）* 統一數據格式，方便業務層使用*/_formatAMapData(data, coords) {console.log('高德地圖返回數據', data)const firstResult = data[0] || {}return firstResult//也可以根據具體數據自定義返回// return {// 	coordinates: coords, // 原始坐標信息// 	formattedAddress: firstResult.address || '', // 完整地址// 	country: firstResult.country || '',// 	province: firstResult.province || '',// 	city: firstResult.city || '',// 	district: firstResult.district || '',// 	street: firstResult.street || '',// 	streetNumber: firstResult.streetNumber || '',// 	cityCode: firstResult.citycode || '', // 城市編碼// 	adCode: firstResult.adcode || '', // 區域編碼// 	poiList: firstResult.poiList || [] // 周邊POI列表// }}/*** 格式化騰訊地圖返回數據（私有方法）* 統一數據格式，方便業務層使用*/_formatQQMapData(data, coords) {console.log('騰訊地圖返回數據-', data)const address = data.result || {}return address//也可以根據具體數據自定義返回// return {// 	coordinates: coords, // 原始坐標信息// 	formattedAddress: address.address || '', // 完整地址// 	country: address.address_component?.nation || '',// 	province: address.address_component?.province || '',// 	city: address.address_component?.city || '',// 	district: address.address_component?.district || '',// 	street: address.address_component?.street || '',// 	streetNumber: address.add// }}
}

2、使用示例

import LocationService from '@/utils/location.js'
async getAMapAddress() {try {// 僅僅獲取經緯度const result = await new LocationService().getCoordinates()// 根據高德逆地理編碼接口,獲取當前經緯度對應的具體地址const result = await new LocationService().getAMapAddress()// 根據騰訊逆地理編碼接口,獲取當前經緯度對應的具體地址const result = await new LocationService().getQQMapAddress()// 根據高德逆地理編碼接口,獲取傳入的經緯度對應的具體地址const result = await new LocationService().getAMapByCoordinates('', '')// 根據騰訊逆地理編碼接口,獲取傳入的經緯度對應的具體地址const result = await new LocationService().getQQMapByCoordinates('', '')console.log(result, '經緯度||地址')} catch (err) {console.log(err)}
}