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

之前的一个老项目,使用 uniapp 的uni.getLocation 发现H5端定位不准确,比如余杭区会定位到临平区,根据官方文档初步判断是项目的uniapp的版本太低。

我选择的方式不是区更新uniapp的版本,是直接使用高德地图的api获取定位。

1.首先在腾讯地图后台拿到地图的key

2.H5获取高德当前位置

1)腾讯地图搜索定位组件:

2)html文件中引入

javascript 复制代码
<script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>

3)调用地图获取定位

javascript 复制代码
// 高德地图获取定位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 来获取当前位置的经纬度,初始化地图实例,将位置的经纬度解析成中文地址

引入:

javascript 复制代码
var QQMapWX =  require('@/libs/qqmap-wx-jssdk.min.js');
javascript 复制代码
// 引入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)调用

javascript 复制代码
onLoad: function(options) {
			// #ifdef H5
			this.getH5Location();
			// #endif
			//#ifdef MP
			this.getWXLocation();
			//#endif
		},
相关推荐
郭wes代码2 小时前
Cmd命令大全(万字详细版)
python·算法·小程序
web150850966414 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
.生产的驴7 小时前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
汤姆yu12 小时前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游
计算机徐师兄13 小时前
基于TP5框架的家具购物小程序的设计与实现【附源码、文档】
小程序·php·家具购物小程序·家具购物微信小程序·家具购物
曲辒净13 小时前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序
朽木成才15 小时前
小程序快速实现大模型聊天机器人
小程序·机器人
peachSoda715 小时前
随手记:小程序使用uni.createVideoContext视频无法触发播放
小程序
何极光15 小时前
uniapp小程序样式穿透
前端·小程序·uni-app
小墨&晓末15 小时前
【PythonGui实战】自动摇号小程序
python·算法·小程序·系统安全