目录

      • 1、单独抽离封装
      • 2、使用示例
      • 3、前置条件和配置
      • 4、效果弹框

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)}
}

3、前置条件和配置

具体可以查看另一篇文章:
https://blog.csdn.net/weixin_41549971/article/details/149837996?spm=1011.2415.3001.5331

4、效果弹框

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/93515.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/93515.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/93515.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入理解 Python 元类中的 __prepare__ 方法:掌控类属性定义顺序的艺术

关键词:元类、type、prepare、OrderedDict、属性顺序、数据建模在 Python 的高级编程中,元类(metaclass) 是一种强大而神秘的机制。它允许我们在类创建之前进行干预,从而实现诸如自动属性验证、字段序列化、ORM 映射等…

MATLAB基础训练实验

MATLAB基础训练实验 1. 标题 MATLAB 基础训练 2. 内容概括 本实验旨在通过MATLAB基础操作训练,掌握数组创建与运算、矩阵操作、M文件编写、流程控制、二维/三维绘图等核心技能。实验内容包括复数运算、矩阵变换、函数绘图、结构体创建、电路方程求解、电流波形绘制、三维曲…

implement libwhich for Windows

因为windows没有类似unix的which命令 现在实现尽量跨平台,且stb 风格的libwhich // which.h #ifndef LIBWHICH_H #define LIBWHICH_H#ifdef __cplusplus extern "C" { #endif/** 查找可执行文件在系统中的路径* 参数:* filename - 要查找的可执行文件名…

记与客户端的一次“无谓之争”

一、冲突今天,流程收尾时,客户端为了统计时延,连发两个接口:一个报开始时间,一个报结束时间。我因性能考虑,说:“明明一个接口能搞定!”客户端负责人说:“发送两次更合理…

Java Condition 对象 wait 方法使用与修复方案

在 Java 中,java.util.concurrent.locks.Condition 接口提供了类似监视器的方法(await(), signal(), signalAll())来实现线程间的协调。正确使用 Condition 对象需要遵循特定模式以避免常见问题。常见问题及修复方案1. 虚假唤醒问题问题&…

​​金仓数据库KingbaseES V9R1C10安装教程 - Windows版详细指南​

文章目录一、前言二、软件下载2.1 下载安装包2.2 下载授权文件三. 安装KingbaseES数据库3.1 解压安装包3.2 运行安装程序3.3 安装步骤详解步骤1:欢迎界面步骤2:许可协议步骤3:添加授权文件步骤4:选择安装路径步骤5:选择…

论文推荐|迁移学习+多模态特征融合

来gongzhonghao【图灵学术计算机论文辅导】,快速拿捏更多计算机SCI/CCF发文资讯~在Cvpr、NeurIPS、AAAI等顶会中,迁移学习多模态特征融合正以“降成本、提性能、省标注”的绝对优势成为最热赛道。面对超大模型全量微调天价算力、异构模态对齐…

接口芯片断电高阻态特性研究与应用分析

摘要: 本文以国科安芯推出的ASM1042 系列通讯接口芯片为例,深入探讨接口芯片断电高阻态特性,涵盖其定义、原理、应用及设计注意事项。通过对相关技术资料的梳理与分析,结合具体芯片实例,阐述高阻态在电路稳定性、设备兼…

数据结构初阶(17)排序算法——非比较排序(计数排序·动图演示)、排序算法总结

2.0 十大排序算法2.5 非比较排序 之前学习的排序算法都是比较排序——借助比较大小,来实现排序。非比较就是不借助比较大小,来实现排序。——小众的、局限的非比较排序大致有这些:计数排序、桶排序、基数排序。桶排序、基数排序在实践中意义不…

VisualStudio2022调试Unity C#代码步骤

一.VS安装Unity开发组件按下图所示安装Unity开发组件二.附加Unity调试程序2.1 先将Unity进入Play模式2.2 VS选择附加Unity调试程序菜单2.3 选择附加的实例三.加入断点测试Update方法中成功进入断点

Zabbix【部署 01】Zabbix企业级分布式监控系统部署配置使用实例(在线安装及问题处理)程序安装+数据库初始+前端配置+服务启动+Web登录

Zabbix使用 1.下载 2.安装 2.1 程序安装 2.2 数据库初始化 2.3 前端配置 2.4 服务启动 3.Web登录 4.总结 安装说明: 本次安装为在线安装,使用数据库为PostgreSQL。 1.下载 由于是在线安装,这次不涉及离线安装包的下载,仅做参考用,点击跳转【下载页面】,下载说明: 版本…

爬机 验证服务器是否拒绝请求

当访问XX网站时返回 418 状态码时,说明服务器识别到了爬虫行为并拒绝了请求。这是网站的反爬机制在起作用,我们可以通过模拟浏览器行为来绕过基础反爬。import requestsurl https://cn.bing.com/# 模拟浏览器的完整请求头,包含更多浏览器标识…

GaussDB 数据库架构师修炼(十三)安全管理(3)-数据库审计

1 数据库审计作用数据库审计机制主要通过对SQL操作或其他操作记录审计日志的方式 ,增强数据库系统对非法操作的追溯及举证能力 。高斯数据库提供两种审计特性 :传统审计 ,统一审计。2 传统审计传统审计通过GUC参数配置需要对数据库的哪些操作…

C语言(11)—— 数组(超绝详细总结)

Hi!冒险者😎,欢迎闯入 C 语言的奇幻异世界🌌! 我是 ankleless🧑‍💻,和你一样的闯荡者~ 这是我的冒险笔记打怪升级之路——C语言之路📖,里面有踩过…

【AI生成+补充】高频 hql的面试问题 以及 具体sql

以下是高频HQL面试题及对应SQL示例,涵盖核心语法、优化技巧和典型场景,可直接用于面试准备: 一、基础操作与DDL 1. 创建分区表 & 动态插入分区 sql -- 创建外部分区表(按日期分区) CREATE EXTERNAL TABLE logs…

开源 Arkts 鸿蒙应用 开发(十七)通讯--http多文件下载

文章的目的为了记录使用Arkts 进行Harmony app 开发学习的经历。本职为嵌入式软件开发,公司安排开发app,临时学习,完成app的开发。开发流程和要点有些记忆模糊,赶紧记录,防止忘记。 相关链接: 开源 Arkts …

Cloudflare Tunnel 使用SAAS回源加速配置教程

在使用 Cloudflare Tunnel 时,通过“主域名+加速域名”的联动配置,既能隐藏内网 IP,又能优化访问速度。本文以实际部署场景为例(主域名 zhuyuming.dpdns.org、加速域名 jiasu.dpdns.org),带你一步步完成内网服务穿透(以 192.168.1.6:5555 网页服务为例),实操性强,可直…

C++实战

Ref deepwiki vuecruddllamma.cpp 目标 计划实现一个C项目,前端用vue,后端用C和llama.cpp。实现可以进行逻辑功能和AI推理。

dify 调用本地的 stable diffusion api生成图片的工作流搭建

Dify调用本地Stable Diffusion API的工作流搭建指南 核心架构 #mermaid-svg-ce029i4XFKrDzRgU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ce029i4XFKrDzRgU .error-icon{fill:#552222;}#mermaid-svg-ce029i4XFK…

【Web后端】Django、flask及其场景——以构建系统原型为例

一、Django 和 Flask 简介 Django 是一个高级 Python Web 框架,提供了完整的“开箱即用”功能,包括 ORM、认证、管理后台等,便于快速开发安全且可维护的网站。Flask 是一个轻量级 Python Web 框架,核心功能比较简单,但…