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

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
},
<think>嗯,用户想了解如何在UniApp获取高德地图经纬度。首先,我需要回忆一下UniApp的定位相关API。UniApp本身提供了uni.getLocation方法,但默认可能使用的是系统自带的定位服务,比如在微信小程序里会是腾讯地图。所以用户可能需要切换到高德地图的定位服务。 接下来,用户可能需要配置高德地图的SDK,尤其是在各平台的小程序或App中。比如,微信小程序需要在小程序管理后台设置高德地图的密钥,App可能需要引入高德地图的SDK并配置相关权限。 然后,代码部分需要区分不同平台。H5可能需要使用高德地图的JavaScript API,而小程序App可能需要不同的处理方式。需要注意H5获取定位可能会有跨域问题,或者需要用户授权。 权限配置也是关键,比如在App的manifest.json里添加高德地图AppKey,还有在AndroidiOS的配置文件中添加定位权限声明。用户可能容易忽略这些步骤,导致定位功能无法使用。 另外,示例代码的结构需要清晰,展示如何调用uni.getLocation并处理不同平台的返回结果。可能还需要处理用户拒绝授权的情况,提供友好的提示。同时,要注意在高德地图后台创建应用并获取Key,这部分用户可能需要指导。 最后,需要提醒用户测试时的注意事项,比如真机调试权限申请,确保功能正常。可能还需要提到坐标系的差异,高德地图使用GCJ-02,而UniApp默认可能返回其他坐标系,需要确认配置正确。</think>在UniApp获取高德地图经纬度,需要通过以下步骤实现: 1. **配置高德地图Key** - 在高德开放平台(https://lbs.amap.com)注册账号并创建应用 - 获取Web服务的JS API Key(H5使用)小程序Key(小程序使用) 2. **manifest.json配置** ```json // 在manifest.json的"App模块配置"中添加 "Geolocation": { "enableHighAccuracy": true }, "Permission": { "android": { "request": [ "android.permission.ACCESS_COARSE_LOCATION", "android.permission.ACCESS_FINE_LOCATION" ] } } ``` 3. **核心代码示例** ```javascript // 获取定位权限 function getLocation() { uni.authorize({ scope: 'scope.userLocation', success: () => { // 授权成功 requestLocation(); }, fail: () => { uni.showModal({ title: '提示', content: '需要获取您的地理位置', success(res) { if (res.confirm) { uni.openSetting(); // 打开设置页面 } } }); } }); } // 获取具体位置 function requestLocation() { uni.getLocation({ type: 'gcj02', // 必须使用高德坐标系 altitude: true, success: (res) => { console.log('高德经纬度:', { latitude: res.latitude, longitude: res.longitude }); // 这里可以调用高德逆地理编码API获取详细地址 // https://lbs.amap.com/api/webservice/guide/api/georegeo }, fail: (err) => { console.error('定位失败:', err); uni.showToast({ title: '定位失败', icon: 'none' }); } }); } // 注意:小程序需要额外配置 // 在manifest.json的mp-weixin节点下添加 "requiredPrivateInfos": ["getLocation"] ``` 4. **平台差异处理** - **H5**:需要在高德控制台配置安全域名 - **小程序**:需在小程序管理后台配置request合法域名 ``` https://restapi.amap.com ``` - **App**:需要添加原生定位权限 5. **注意事项** - 安卓需要动态申请权限 - iOS需要配置NSLocationWhenInUseUsageDescription - 高德坐标系为GCJ-02,与其他坐标系(如WGS84)存在偏移 - 单次定位误差范围约在10-50米之间 建议配合高德地图的逆地理编码API使用,可将经纬度转换为具体地址信息: ```javascript function regeo(latitude, longitude) { uni.request({ url: 'https://restapi.amap.com/v3/geocode/regeo', data: { key: '你的高德Key', location: `${longitude},${latitude}`, radius: 50 }, success: (res) => { const address = res.data.regeocode.formatted_address; console.log('详细地址:', address); } }); } ``` 测试时建议使用真机调试,首次定位可能需要较长时间(约3-5秒),后续定位会有缓存加速。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值