当前位置: 首页 > article >正文

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

http://www.kler.cn/a/390225.html

相关文章:

  • 虚幻引擎 CEO 谈元宇宙:发展、策略与布局
  • css:盒子模型
  • 力扣104 : 二叉树最大深度
  • 丹摩征文活动|丹摩智算平台使用指南
  • MySQL Workbench导入数据比mysql命令行慢
  • IEC60870-5-104 协议源码架构详细分析
  • 确定图像的熵和各向异性 Halcon entropy_gray 解析
  • Spring资源加载模块,原来XML就这,活该被注解踩在脚下 手写Spring第六篇了
  • 【vue】封装一个可随时暂停启动无需担心副作用的定时器
  • AI - 人工智能;Open WebUI;Lobe Chat;Ollama
  • git clone相关问题和bug记录
  • 本地保存mysql凭据实现免密登录mysql
  • Ubuntu 18.04 安装Fast-planner
  • Ecmascript(ES)标准
  • 【新人系列】Python 入门(九):数据结构 - 中
  • 深入探讨Vue项目中缺少明显入口文件的原因及解决策略
  • Spring Boot框架:计算机课程与工程认证的桥梁
  • 【宝藏】浏览器端的模块化问题(1)
  • 浅谈Spring MVC
  • middleware中间件概述
  • Django博客网站上线前准备事项
  • 昇思大模型平台打卡体验活动:项目2基于MindSpore通过GPT实现情感分类
  • PHP和Python脚本的性能监测方案
  • 游戏中的设计模式及杂项
  • 【Android】名不符实的Window类
  • NVM 介绍及使用指南