【uniapp】 APP&H5端-获取经纬度和地理位置信息（高德地图&腾讯地图）

原创已于 2024-01-04 14:32:54 修改 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2023-11-15 14:44:03 首次发布

uniapp 专栏收录该内容

14 篇文章

订阅专栏

1、在manifest.json文件中配置腾讯地图应用的key。

在高德地图或腾讯地图开放平台申请key

高德地图开放平台 https://console.amap.com/dev/key/app
腾讯地图开放平台 https://lbs.qq.com

在这里插入图片描述

2、在script中添加获取经纬度的方法：

引入weixin_sdk.js
// #ifdef H5
import wx from ‘@/utils/weixin_sdk.js’;
Vue.prototype.wx = wx;
// #endif

get_weizhi:function(){
	var that=this;
	// #ifdef H5
	var wx=this.wx;
	// 判断是否是微信公众号
	let ua = window.navigator.userAgent.toLowerCase();
	// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		uni.request({
			url: this.shareUrl, 
			data: {url:window.location.href},
			header: {},
			success: (r) => {
				var data=r.data;
				if(data.code==1){
					wx.config({
						debug: false, 
						appId: data.data.appId, 
						timestamp: data.data.timestamp, 
						nonceStr: data.data.nonceStr, 
						signature: data.data.signature, 
						jsApiList: ['getLocation']
					});
					wx.ready(function(){
						// 获取地理位置经纬度
						wx.getLocation({
							isHighAccuracy: true, // 开启地图精准定位
							type: 'gcj02', // 地图类型写这个
							success: (res) => {
								console.log(res)
								// Android 返回数据为"longitude":"113.67496", 
								//              "latitude":"34.752373"
								// ios 返回数据为"longitude":113.67570495605469, 
								//              "latitude":34.752342224121094
								// 将数据格式转换，并保留6位小数
								var jw_json={ 
									jingdu: parseFloat(res.longitude).toFixed(6), 
									weidu: parseFloat(res.latitude).toFixed(6)
								};
								uni.setStorageSync('jw_json', jw_json);
							},
							fail(errpr){
								uni.showToast({ title: JSON.stringify(errpr), icon: 'none' })
							}
						});
					});
				}
			}
		});
	}else{
		uni.getLocation({
		    type: 'wgs84',
		    isHighAccuracy: true,//开启高精度定位
		    success(res) {
				console.log(res)
				var jw_json={ 
					jingdu: parseFloat(res.longitude).toFixed(6), 
					weidu: parseFloat(res.latitude).toFixed(6)
				};
				uni.setStorageSync('jw_json', jw_json);
		    },
			fail: function (error) {
				console.log(error)
				that.toast(JSON.stringify(error));
			}
		})
	}
	// #endif
	// #ifdef APP-PLUS
	uni.getLocation(({
		type: "gcj02",
		altitude: true,
		isHighAccuracy: true,
		geocode: true,
		success: function (res) {
			console.log('getLocation---',res);
			var jw_json={ 
				jingdu: parseFloat(res.longitude).toFixed(6), 
				weidu: parseFloat(res.latitude).toFixed(6),
				address: res.address.district+res.address.poiName+res.address.street+res.address.streetNum
			};
			uni.setStorageSync('jw_json', jw_json);
		},
		fail: function (error) {
			console.log(error)
			this.toast(JSON.stringify(error));
		},
	}));
	// #endif
},