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)调用地图获取定位

// 高德地图获取定位H5
			getH5Location(){
				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 = this
        if(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 H5
			this.getH5Location();
			// #endif
			//#ifdef MP
			this.getWXLocation();
			//#endif
		},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Pycharm,2024最新版Pycharm下载安装配置教程!

目录 1、Pycharm 简介2、Pycharm下载3、环境变量的配置4、Pycharm的使用 1、Pycharm 简介 Pycharm资料领取不收米 PyCharm是一种Python IDE&#xff08;Integrated Development Environment&#xff0c;集成开发环境&#xff09;&#xff0c;带有一整套可以帮助用户在使用Py…

(十三)JavaWeb后端开发——MySQL2

目录 1.DQL数据查询语言 1.1基本查询 1.2条件查询 where关键字 1.3分组查询 1.4排序查询 1.5分页查询 2.多表设计 3.多表查询——联查 4.多表查询——子查询​ 5.MySQL 事务 6.事务管理&#xff08;事务进阶&#xff09; 7.MySQL 索引 1.DQL数据查询语言 分为五大…

C++虚继承演示

在继承中如果出现&#xff1a; 这种情况&#xff0c;B和C都继承了A&#xff0c;D继承了B、C 在D中访问A的成员会出现&#xff1a; 这样的警告 是因为在继承时A出现两条分支&#xff1a;ABD、ACD 编译器不知道访问的A中的元素是经过B继承还是C继承 所以B、C在继承A时要用到…

【论文速看】DL最新进展20241109-图像超分、物理信息神经网络、扩散模型

目录 【图像超分】【物理信息神经网络】【扩散模型】 【图像超分】 [2024 红外图像超分] Infrared Image Super-Resolution via Lightweight Information Split Network 论文链接&#xff1a;https://arxiv.org/pdf/2405.10561v2 代码链接&#xff1a;无 单图像超分辨率&…

革命性AI搜索引擎!ChatGPT最新功能发布,无广告更智能!

文章目录 零、前言一、ChatGPT最新AI搜索引擎功能操作指导实战1:搜索新闻实战2:搜索天气实战3:搜索体育消息 二、感受 零、前言 大人&#xff0c;时代变了。 最强 AI 助力下的无广告搜索引擎终于问世。我们期待已久的这一刻终于到来了&#xff0c;从今天起&#xff0c;ChatGPT…

qt QLocale详解

1、概述 QLocale是Qt框架中的一个类&#xff0c;用于处理与本地化相关的操作。它能够方便地实现日期、时间、数字和货币的格式化和解析&#xff0c;支持不同的语言、区域设置和字符集。QLocale提供了一种跨平台的方式来获取当前系统的语言设置&#xff0c;并返回该语言的本地化…

Linux基础4-进程4(环境变量,命令行参数详解)

上篇文章:Linux基础4-进程3(进程优先级&#xff0c;竞争&#xff0c;独立&#xff0c;并行&#xff0c;并发&#xff0c;进程切换)-CSDN博客 本章重点: Linux中环境变量的理解和使用 目录 一. 环境变量概念和查看环境变量 1.1 环境变量概念 1.2 查看环境变量 二. 获取环境变…

Java学习路线:Maven(一)认识Maven

目录 认识Maven 新建Maven文件 导入依赖 认识Maven Maven是一个Java的项目管理工具&#xff0c;通过Maven&#xff0c;我们可以实现&#xff1a; 项目自动构建&#xff0c;包括代码的编译、测试、打包、安装等依赖管理&#xff0c;快速完成依赖的导入 在学习Maven之前&…

Node.js——fs模块-文件删除

1、在Node.js中&#xff0c;我们可以使用unlink或unlinkSync来删除文件。 2、语法&#xff1a; fs.unlink(path,callback) fs.unlinkSync(path) 参数说明&#xff1a; path 文件路径 callback 操作后的回调函数 本文的分享到此结束&#xff0c;欢迎大家评论区一同讨论学…

PG逻辑复制的REPLICA IDENTITY几种设置

前两天同事问了一个PG的错误&#xff0c;创建一张普通表&#xff0c;insert插入正常&#xff0c;但是执行update和delete时&#xff0c;提示这个错误&#xff0c; 代码语言&#xff1a;javascript 复制 SQL 错误 [55000]: ERROR: cannot delete from table "temp_tb&qu…

【人工智能】利用大语言模型(LLM)实现机器学习模型选择与实验的自动化

文章目录 引言环境准备数据集说明 项目结构主要文件说明 导入必要的软件包软件包功能简述 辅助函数定义加载配置文件加载数据集预处理数据集函数功能详解 集成LLM进行模型选择调用LLM的函数定义函数功能详解 清理和验证LLM的输出清理超参数建议提取模型名称验证超参数修正超参数…

机器学习在时间序列预测中的应用与实现——以电力负荷预测为例(附代码)

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 随着数据采集技术的发展&#xff0c;时间序列数据在各个领域中的应用越来越广泛。时间序列预测旨在基于过去的时间数据来…

Python学习------第四天

Python的判断语句 一、布尔类型和比较运算符 二、 if语句的基本格式 if语句注意空格缩进&#xff01;&#xff01;&#xff01; if else python判断语句的嵌套用法&#xff1a;

Vue3版本的uniapp项目运行至鸿蒙系统

新建Vue3版本的uniapp项目 注意&#xff0c;先将HbuilderX升级至最新版本&#xff0c;这样才支持鸿蒙系统的调试与运行&#xff1b; 按照如下图片点击&#xff0c;快速升级皆可。 通过HbuilderX创建 官方文档指导链接 点击HbuilderX中左上角文件->新建->项目 创建vue3…

让Apache正确处理不同编码的文件避免中文乱码

安装了apache2.4.39以后&#xff0c;默认编码是UTF-8&#xff0c;不管你文件是什么编码&#xff0c;统统按这个来解析&#xff0c;因此 GB2312编码文件内的中文将显示为乱码。 <!doctype html> <html> <head><meta http-equiv"Content-Type" c…

LabVIEW实验室液压制动系统

压制动系统是许多实验设备的重要安全组件&#xff0c;尤其在高负荷、高速实验环境下&#xff0c;制动系统的性能对设备和操作人员的安全至关重要。传统的实验室液压制动系统监测方法存在数据采集实时性差、精度低、故障预警不及时等问题。为了提高实验安全性和设备运行的稳定性…

Qt教程(007):资源文件添加

文章目录 7.1 创建新的项目7.2 添加资源文件7.2 设置页面7.1 创建新的项目 选择创建项目类型 输入项目名称 勾选UI界面 7.2 添加资源文件 选中项目名称,右键,选择【Add New】 添加资源文件 选择Qt Resource File文件

【Python爬虫实战】深入解锁 DrissionPage:ChromiumPage 自动化网页操作指南

&#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、ChromiumPage基础操作 &#xff08;一&#xff09;初始化Drission 和 ChromiumPage 对象 &#xff0…

如何保证kafka生产者数据可靠性

ack参数的设置&#xff1a; 0&#xff1a;生产者发送过来的数据&#xff0c;不需要等数据落盘应答 假如发送了Hello 和 World两个信息&#xff0c;Leader直接挂掉&#xff0c;数据就会丢失 生产者 ---> Kafka集群 一放进去就跑 数据可靠性分析&#xff1a;丢数 1&#…

python爬虫指南——初学者避坑篇

目录 Python爬虫初学者学习指南一、学习方向二、Python爬虫知识点总结三、具体知识点详解和实现步骤1. HTTP请求和HTML解析2. 正则表达式提取数据3. 动态内容爬取4. 数据存储5. 反爬虫应对措施 四、完整案例&#xff1a;爬取京东商品信息1. 导入库和设置基本信息2. 获取网页内容…