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

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.lryc.cn/news/482119.html

相关文章:

  • SQL HAVING子句
  • 计算机视觉基础:OpenCV库详解
  • UI自动化测试工具(超详细总结)
  • AJAX 全面教程:从基础到高级
  • ONLYOFFICE 8.2测评:功能增强与体验优化,打造高效办公新体验
  • Science Robotics 综述揭示演化研究新范式,从机器人复活远古生物!
  • uni-app表格带分页,后端处理过每页显示多少条
  • 基于STM32设计的矿山环境监测系统(NBIOT)_262
  • 【初阶数据结构与算法】线性表之链表的分类以及双链表的定义与实现
  • 219页华为供应链管理:市场预测SOP计划、销售预测与存货管理精要
  • mac 安装指定的node和npm版本
  • 为什么分布式光伏规模是6MW为界点?
  • arm64架构的linux 配置vm_page_prot方式
  • vue3 + naive ui card header 和 title 冲突 bug
  • Ubuntu 22.04.5 LTS配置 bond
  • 100种算法【Python版】第58篇——滤波算法之卡尔曼滤波
  • 关于几种卷积
  • 51单片机教程(五)- LED灯闪烁
  • VUE3中Element table表头动态展示合计信息(不是表尾合计)
  • git重置的四种类型(Git Reset)
  • 【Java集合面试1】说说Java中的HashMap原理?
  • 万字长文解读机器学习——决策树
  • 内网环境,基于k8s docer 自动发包
  • 【HCIP园区网综合拓扑实验】配置步骤与详解(已施工完毕)
  • Qt 编写插件plugin,支持接口定义信号
  • Qt中 QWidget 和 QMainWindow 区别
  • Kafka集群中数据的存储是按照什么方式存储的?
  • 中断的硬件框架
  • 数据备份策略:企业防御的关键
  • Baget 私有化nuget