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.mzph.cn/news/885188.shtml

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

相关文章

探索Python网络请求新纪元:httpx库的崛起

文章目录 **探索Python网络请求新纪元&#xff1a;httpx库的崛起**第一部分&#xff1a;背景介绍第二部分&#xff1a;httpx库是什么&#xff1f;第三部分&#xff1a;如何安装httpx库&#xff1f;第四部分&#xff1a;简单的库函数使用方法1. 发送GET请求2. 发送POST请求3. 超…

产品的四个生命周期,产品经理需深刻理解

在产品管理的世界里&#xff0c;产品就像有生命的个体&#xff0c;经历着从诞生到消亡的过程。作为产品经理&#xff0c;深刻理解产品的四个生命周期 —— 引入期、成长期、成熟期和衰退期&#xff0c;是打造成功产品的关键。 引入期&#xff1a;破局的起点 对于 B 端产品而言&…

TensorFlow|咖啡豆识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 &#x1f37a; 要求&#xff1a; 自己搭建VGG-16网络框架调用官方的VGG-16网络框架 &#x1f37b; 拔高&#xff08;可选&#xff09;&#xff1a; 验证集准…

《深入浅出Apache Spark》系列②:Spark SQL原理精髓全解析

导读&#xff1a;SQL 诞生于 20 世纪 70 年代&#xff0c;至今已有半个世纪。SQL 语言具有语法简单&#xff0c;低学习门槛等特点&#xff0c;诞生之后迅速普及与流行开来。由于 SQL 具有易学易用的特点&#xff0c;使得开发人员容易掌握&#xff0c;企业若能在其计算机软件中支…

VMware虚拟机可以被外部机器访问吗?

如何设置让同局域网内其他机器访问本地虚拟机服务&#xff08;这里以访问我本地虚拟机ELasticSearch服务为例&#xff09; 选中虚拟机 - 虚拟机 - 设置 虚拟机网络设置&#xff1a; 选中网络适配器&#xff0c;修改网络模式为NAT模式 编辑 - 虚拟机网络编辑器 更改设置 …

【论文复现】自动化细胞核分割与特征分析

本文所涉及所有资源均在这里可获取。 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 论文复现 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f496; 自动化细胞核分割与特征分析 引言效果展示HoverNet概述HoverNet原理分析整…

【NOIP普及组】质因数分解

【NOIP普及组】质因数分解 C语言代码C代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 已知正整数 n 是两个不同的质数的乘积&#xff0c;试求出较大的那个质数。 输入 输入只有一行&#xff0c;包含一个正整数…

2024软件测试面试热点问题

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 大厂面试热点问题 1、测试人员需要何时参加需求分析&#xff1f; 如果条件循序 原则上来说 是越早介入需求分析越好 因为测试人员对需求理解越深刻 对测试工…

qt QTextStream详解

1、概述 QTextStream类是Qt框架中用于处理文本输入输出的类。它提供了一种方便的方式&#xff0c;可以从各种QIODevice&#xff08;如QFile、QBuffer、QTcpSocket等&#xff09;中读取文本数据&#xff0c;或者将文本数据写入这些设备中。QTextStream能够自动处理字符编码的转…

Webpack性能优化指南:从构建到部署的全方位策略

文章目录 1、webpack的优化-OneOf2、webpack的优化-Include/Exclude3、webpack优化-SourceMap4、webpack的优化-Babel缓存5、wenbpack的优化-resolve配置6、构建结果分析 webpack优化在现代前端开发中&#xff0c;Webpack已成为模块打包器的事实标准&#xff0c;它通过将项目中…

[ DOS 命令基础 4 ] DOS 命令命令详解-端口进程相关命令

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

飞书API-获取tenant_access_token

1.在飞书工作台创建应用&#xff0c;跳到开发者后台&#xff0c;选创建企业自建应用 2.设置并发布应用 必须要发布应用才可以开始使用了&#xff01;&#xff01;&#xff01; 3.调用获取token的API 参考链接&#xff1a; 开发文档 - 飞书开放平台https://open.feishu.cn/do…

linux 安装anaconda3

1.下载 使用repo镜像网址下载对应安装包 右击获取下载地址&#xff0c;使用终端下载 wget https://repo.anaconda.com/archive/Anaconda3-2024.02-1-Linux-x86_64.sh2.安装 使用以下命令可直接指定位置 bash Anaconda3-2024.02-1-Linux-x86_64.sh -b -p /home/anaconda3也…

LabVIEW编程过程中为什么会出现bug?

在LabVIEW编程过程中&#xff0c;Bug的产生往往源自多方面原因。以下从具体的案例角度分析一些常见的Bug成因和调试方法&#xff0c;以便更好地理解和预防这些问题。 ​ 1. 数据流错误 案例&#xff1a;在一个LabVIEW程序中&#xff0c;多个计算节点依赖相同的输入数据&#…

【自用】fastapi 学习记录 --请求和参数部分

fastai个人学习笔记 一、模块化结构框架 设置了默认请求头shop之后就无需再app0x里接口函数前全部写上/shop/xxx&#xff0c;或者/user/xxx&#xff0c;他会同意添加~如果都写了就会出现以下的情况&#xff08;重复shop&#xff09;&#xff1a; 二、请求与响应 关于参数&a…

若依入门案例

若依&#xff08;RuoYi&#xff09;框架是一个基于Java的开源企业级快速开发框架&#xff0c;主要用于构建信息管理系统。它结合了多种前端和后端技术&#xff0c;提供了高效的开发工具&#xff0c;并具备以下主要功能&#xff1a; 一、后端功能 技术选型&#xff1a;若依后端…

【Web前端】OOP编程范式

面向对象编程&#xff08;Object-Oriented Programming&#xff0c;简称 OOP&#xff09;是一种程序设计思想&#xff0c;它通过将程序视为一组相互作用的对象来设计程序。OOP 提出了一些重要的基本概念&#xff0c;包括类与实例、继承和封装。面向对象编程将系统视为由多个对象…

Mac解决 zsh: command not found: ll

Mac解决 zsh: command not found: ll 文章目录 Mac解决 zsh: command not found: ll解决方法 解决方法 1.打开bash_profile 配置文件vim ~/.bash_profile2.在文件中添加配置&#xff1a;alias llls -alF键盘按下 I 键进入编辑模式3. alias llls -alF添加完配置后&#xff0c;按…

JavaAPI(1)

Java的API&#xff08;1&#xff09; 一、Math的API 是一个帮助我们进行数学计算的工具类私有化构造方法&#xff0c;所有的方法都是静态的&#xff08;可以直接通过类名.调用&#xff09; 平方根&#xff1a;Math.sqrt()立方根&#xff1a;Math.cbrt() 示例&#xff1a; p…

UI界面设计入门:打造卓越用户体验

互联网的迅猛发展催生了众多相关职业&#xff0c;其中UI界面设计师成为互联网行业的关键角色之一。UI界面设计无处不在&#xff0c;影响着网站、应用程序以及其他数字平台上的按钮、菜单布局、色彩搭配和字体排版等。UI设计不仅仅是字体、色彩和导航栏的组合&#xff0c;它的意…