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

news/2024/11/8 17:09:22 标签: uni-app, 微信小程序, 小程序

之前的一个老项目,使用 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
		},

http://www.niftyadmin.cn/n/5744189.html

相关文章

【深度学习】论文笔记:空间变换网络(Spatial Transformer Networks)

博主简介&#xff1a;努力学习的22级计算机科学与技术本科生一枚&#x1f338;博主主页&#xff1a; Yaoyao2024往期回顾&#xff1a; 【机器学习】有监督学习由浅入深讲解分类算法Fisher算法讲解每日一言&#x1f33c;: 今天不想跑&#xff0c;所以才去跑&#xff0c;这才是长…

RK3568 关于python依赖Miniconda3虚拟环境自启动

有关如何安装Miniconda3可以查看博客:RK3568 安装Miniconda3_miniconda3 aarch64 linux-CSDN博客 然后目前有个需求是需要开机自启动python脚本,但是需要依赖于虚拟环境,也就是说一起来就要打开虚拟环境并运行python脚本,一旦没有虚拟环境,python脚本就无法运行 解决办法…

Go语言的常用内置函数

文章目录 一、Strings包字符串处理包定义Strings包的基本用法Strconv包中常用函数 二、Time包三、Math包math包概述使用math包 四、随机数包&#xff08;rand&#xff09; 一、Strings包 字符串处理包定义 Strings包简介&#xff1a; 一般编程语言包含的字符串处理库功能区别…

使用Python简单实现客户端界面

服务端实现 import threading import timeimport wx from socket import socket, AF_INET, SOCK_STREAMclass LServer(wx.Frame):def __init__(self):wx.Frame.__init__(self, None, id1002, titleL服务器端界面, poswx.DefaultPosition, size(400, 450))# 窗口中添加面板pl …

mysql常见的一些配置项

MySQL 有许多配置选项&#xff0c;可以用来调整其行为以满足特定的需求。以下是一些常见的配置选项&#xff0c;除了大小写敏感之外&#xff0c;这些配置选项也经常被调整&#xff1a; 1. 字符集和排序规则 character_set_server: 设置服务器的默认字符集。collation_server:…

基于STM32的贪吃蛇游戏教学

引言 贪吃蛇是一款经典的电脑和手机游戏&#xff0c;它的简单性和趣味性使其成为很多人童年记忆的一部分。在本教程中&#xff0c;我们将创建一个基于STM32的贪吃蛇游戏项目。本项目将使用一个OLED显示屏来展示游戏画面&#xff0c;并使用按键来控制蛇的移动。通过本教程&#…

智能化健身房管理:Spring Boot与Vue的创新解决方案

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…

笔记--(网络3)、交换机、VLAN

交换机 交换机&#xff08;Switch&#xff09;意为“开关”是一种用于电&#xff08;光&#xff09;信号转发的网络设备。它可以为接入交换机的任意两个网络节点提供独享的电信号通路。最常见的交换机是以太网交换机。其他常见的还有电话语音交换机、光纤交换机等。 交换机的…