uniapp实现H5和微信小程序获取当前位置(腾讯地图)

之前的一个老项目,使用 uniapp 的 uni.getLocation 发现H5端定位不准确,比如余杭区会定位到临平区,根据官方文档初步判断是项目的uniapp的版本太低。

我选择的方式不是区更新uniapp的版本,是直接使用高德地图的api获取定位。

1.首先在腾讯地图后台拿到地图的key

2.H5获取高德当前位置

1)腾讯地图搜索定位组件:

2)html文件中引入

<script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>

3)调用地图获取定位

// 高德地图获取定位H5getH5Location(){let self = this;var geolocation = new qq.maps.Geolocation('key','3212便民招聘网');geolocation.getLocation((position)=>{console.log(position,'position0');		uni.setStorageSync('location_address', position.province + position.city + position.district);self.district = position.district;			  					}, (err)=>{console.log(err,'err');})},

3.微信小程序获取当前定位

1)在manifest.json文件中勾选小程序位置,用户打开小程序后,会弹框显示是否要授权定位,点击确定才会获取定位

2)根据文档的步骤来,文档位置:微信小程序javascript SDK

3)下载 JavaScriptSDK v1.2 文件放在目录下,使用uniapp的uni.getLocation 来获取当前位置的经纬度,初始化地图实例,将位置的经纬度解析成中文地址

引入:

var QQMapWX =  require('@/libs/qqmap-wx-jssdk.min.js');
// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');getWXLocation() {let self = thisif(self.district){return;}uni.getLocation({type: 'gcj02',isHighAccuracy: true,success: (res) => {let latitude, longitude;latitude = res.latitude.toString();longitude = res.longitude.toString();self.qqmapsdk = new QQMapWX({key: 'key' // 申请的key});console.log(this.qqmapsdk,'self.qqmapsdk');             self.qqmapsdk.reverseGeocoder({location:{latitude: latitude,longitude: longitude},success(response) {console.log(response,'res---22');uni.setStorageSync('location_address', position.province + position.city + position.district);},fail: function(error) {console.error(error,'error');}})}});},

4)调用

onLoad: function(options) {// #ifdef H5this.getH5Location();// #endif//#ifdef MPthis.getWXLocation();//#endif},

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

小菜家教平台(四):基于SpringBoot+Vue打造一站式学习管理系统

前言 昨天配置完了过滤器&#xff0c;权限检验&#xff0c;基本的SpringSecurity功能已经配置的差不多了&#xff0c;今天继续开发&#xff0c;明天可能会暂停一天整理一下需求&#xff0c;然后就进行CRUD了。 今日进度 补充SpringSecurity异常处理和全局异常处理器 详细操作…

MES管理系统的生产绩效分析与资源可追踪性

在探讨MES管理系统的核心功能时&#xff0c;生产绩效分析与资源可追踪性是两个不可或缺的关键要素。它们共同构成了MES管理系统中对于生产效率、成本控制以及产品质量进行精细管理的基石。以下是对这两个关键领域的深入剖析与重新阐述。 MES管理系统中的生产绩效分析&#xff0…

无人车之路径规划篇

无人车的路径规划是指在一定的环境模型基础上&#xff0c;给定无人车起始点和目标点后&#xff0c;按照性能指标规划出一条无碰撞、能安全到达目标点的有效路径。 一、路径规划的重要性 路径规划对于无人车的安全、高效运行至关重要。它不仅能够提高交通效率&#xff0c;减少交…

unocss 添加支持使用本地 svg 预设图标,并支持更改大小

安装 pnpm install iconify/utils 在配置文件 unocss.config.ts&#xff1a; presets > presetIcons 选项中 通过 FileSystemIconLoader 加载本地图标&#xff0c;并指定目录。 import presetWeapp from unocss-preset-weapp import { extractorAttributify, transformer…

从0开始学习Linux——网络配置

往期目录&#xff1a; 从0开始学习Linux——简介&安装 从0开始学习Linux——搭建属于自己的Linux虚拟机 从0开始学习Linux——文本编辑器 从0开始学习Linux——Yum工具 从0开始学习Linux——远程连接工具 从0开始学习Linux——文件目录 上一个教程中&#xff0c;我们了解了…

Spring中的 InitializingBean、BeanPostProcessor、@PostConstruct 等初始化动作的执行时机分析

初始化Bean的时序图如下&#xff1a; 小结说明&#xff1a; 1、相同点&#xff1a;InitializingBean 的(afterPropertiesSet方法)、BeanPostProcessor、PostConstruct 都是在bean的属性注入完毕之后才执行&#xff0c;都可以用来进行bean的初始化动作 2、初始化执行顺序优先级…

【初阶数据结构与算法】沉浸式刷题之顺序表练习(顺序表以及双指针两种方法)

文章目录 顺序表练习1.移除数组中指定的元素方法1&#xff08;顺序表&#xff09;方法2&#xff08;双指针&#xff09; 2.删除有序数组中的重复项方法1&#xff08;顺序表&#xff09;方法2&#xff08;双指针&#xff09; 3.双指针练习之合并两个有序数组方法1&#xff08;直…

996引擎 - 活捉NPC

996引擎 - 活捉NPC 引擎触发 - 引擎事件(QF)事件处理模块 GameEvent测试文件参考资料 引擎触发 - 引擎事件(QF) cfg_game_data 配置 ShareNpc1 可以将QM和机器人的触发事件全部转到 QF 引擎触发是通用的,TXT的所有触发转换成小写后在LUA中就可使用,如说明书中缺省可反馈至对接群…

第十三届交通运输研究(上海)论坛┆新发展格局下高铁物流运输模式分析

0. 简介 交通运输研究&#xff08;上海&#xff09;论坛&#xff08;简称为TRF&#xff09;是按照国际会议的组织原则&#xff0c;为综合交通运输领域学者们构建的良好合作交流平台。交通运输研究&#xff08;上海&#xff09;论坛已经成功举办了十二届&#xff0c;凝聚了全国…

Qos基本原理+园区网络

解决网络拥塞最直接就是增加带宽&#xff0c;但是费钱。可以用Qos解决 Qos( Quality of Service) 设置不同流量不同优先级 1. QoS技术概述 延迟 v.s. 延迟抖动 延迟 vs 延迟抖动 延迟&#xff1a;指一个数据包从源端传输到目的端所需要的时间。延迟是一个静态的值&#xff0…

SQL用一个字段查询出数据的交集

出个SQL查询的题吧&#xff0c;有兴趣的可以看看 1、问题 下面有一份数据&#xff08;图1&#xff09;&#xff0c;由两部分组成&#xff1a;分析数据和基准数据 分析数据标识列为1&#xff0c;基准数据标识列为1&#xff0c;两字段0,1互斥 要求&#xff1a;按找出两部分数据…

【后端】javaweb过滤器Filter

过滤器Filter 实现敏感词、只能通过登录进入页面。 原理 当我们使用过滤器时&#xff0c;过滤器会对游览器的请求进行过滤&#xff0c;过滤器可以动态的分为3个部分&#xff0c;1.放行之前的代码&#xff0c;2.放行&#xff0c;3.放行后的代码&#xff0c;这3个部分分别会发挥…

C++初阶(十一)--STL--string类

目录 一、string类的概述 二、string类的创建与初始化 1. 直接初始化 2. 无参初始化 3. 从字符数组初始化 三、string类的基本操作 1.string的定义方式 2.string的插入 3.string的拼接 4.string的删除 5.string的查找 6.string的比较 7.string的大小和容量 8.st…

C#笔记 —— 事件

事件的语法 访问修饰符 event 委托类型 事件名&#xff1b; 例&#xff1a; public event Action myEvent; 事件的使用 事件的使用跟委托基本上一模一样&#xff0c; 1.但是事件不能在类外部直接赋值&#xff0c;只能使用 或 - 添加或删除函数&#xff1b; 2.事件不能在类…

Pandas | 理性判断数据是否存在缺失值的一种方法

理性判断 一般思路进一步思考df[B].explode() 一般思路 tcc.info()上述信息info显示没有缺失值 但是真实的情况还是要根据业务实际分析tcc.isnull().sum() # 和tcc.info()作用和tcc.info() 其实是一样的 进一步思考 在此过程中&#xff0c;我们需要检验是否存在采用别的值来表…

leetcode 382.链表随机结点

1.题目要求: 2.题目代码: /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *next) : val(x)…

Java Development Kit (JDK) 详解

什么是 JDK&#xff1f; JDK 是 Java Development Kit 的缩写&#xff0c;是一组用于开发 Java 应用程序的软件开发工具和库的集合。JDK 包含了 Java 运行时环境&#xff08;JRE&#xff09;和 Java 虚拟机&#xff08;JVM&#xff09;&#xff0c;以及一系列开发工具和库。 …

【5.8】指针算法-双指针验证回文串

一、题目 给定一个字符串&#xff0c;验证它是否是回文串&#xff0c; 只考虑字母和数字字符 &#xff0c;可以忽略字母的大小写。 说明&#xff1a; 本题中&#xff0c;我们将空字符串定义为有效的回文串。 示例 1: 输入: "A man , a plan , a canal : Panama " 输…

多功能 Web 应用渗透测试系统

系统简介 本项目命名为SecurityEye&#xff0c;是一款基于 Python-Django 的多功能 Web 应用渗透测试系统&#xff0c;包含漏洞检测、目录识别、端口扫描、指纹识别、域名探测、旁站探测、信息泄露检测、网站权重探测等功能。 项目功能 本系统通过旁站探测、域名探测、、域名…