uniapp h5获取用户地理位置信息(高德地图)

 使用uni.getLocation()先获取到当前位置信息的经纬度

H5端测试可以使用http,上线打包需要设置为https模式

谷歌浏览器可能会获取不到任何信息,因为谷歌浏览器位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败

getCurrentlocation(){
    let that = this
	uni.getLocation({
	type: 'wgs84',
	isHighAccuracy: true,//开启高精度定位
	success(res) {
	console.log('当前位置的经度:' + res.longitude);
	console.log('当前位置的纬度:' + res.latitude);
	}
	})
}

使用高德开发平台注册一个key

高德开发平台:高德开放平台 | 高德地图API (amap.com)

 拿到key在manifest.json里进行配置

 配置完成后使用高德的逆地理编码对上面请求拿到的经纬度进行解析

	turnAdrr(longitude, latitude) {
				let that = this
				let _key = '高德里你注册的key'; //高德API key类型:web服务
				uni.request({
					method: 'GET',
					url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
					data: {
						key: _key,
						location: `${longitude},${latitude}`,
						output: 'JSON',
					},
					success: (res) => {
						console.log(res.data.regeocode.formatted_address);
				           //用户所在的地理位置信息
					},
					fail: r => {
						console.log(r);
					}
				});
			}

App的话可以直接调用uni.getLocation()拿到用户的所在位置,不需要进行解析,可以直接拿到

uni.getLocation({
    type: 'gcj02', //app直接获取地理位置信息要使用gcj02
    geocode:true , //必须要将geocode配置为true
	isHighAccuracy: true,
	success(res) {
		console.log(res.address)
	},
    fail(err){
    console.log(err)
}
})

<think>好的,用户的问题是在UniAppH5环境中使用高德地图实现获取附近位置列表的功能。我需要先理解用户的具体需求,然后结合提供的参考资料,一步步思考解决方案。 首先,用户提到的参考引用中有几个关键点。引用[3]提到高德地图的点聚合和API使用,引用[2]提到H5调用高德API时可能需要处理跨域问题,而引用[5]则涉及密钥错误的问题。这些都可能影响实现过程。 接下来,我需要确定获取附近位置列表的具体步骤。通常,这包括获取用户当前位置的经纬度,然后向高德地图的周边搜索API发送请求,获取附近的POI(兴趣点)数据。根据高德地图的API文档,周边搜索API需要经纬度、半径、关键词等参数,并且需要有效的API密钥。 在UniApp中,H5环境下可能会遇到跨域问题,但引用[2]指出高德地图的API可以直接用uniapp.request调用,而腾讯地图在H5有跨域问题。因此,使用高德地图的API应该不需要处理跨域,可以直接通过uni.request发送请求。 然后,获取用户当前位置。根据引用[4]和[5],需要注意权限问题和密钥配置。用户需要确保在manifest.json中配置了高德地图AppKey,并且在H5环境下正确设置了安全域名。此外,处理用户拒绝定位权限的情况,可能需要提供备用方案,比如IP定位或者默认坐标。 接下来是代码结构。首先调用uni.getLocation获取经纬度,然后使用这些坐标调用高德地图的周边搜索API。处理API返回的数据,解析出附近的POI列表,并处理可能的错误,比如密钥错误、网络问题等。 示例代码需要包括获取定位、发送请求、处理响应和错误的部分。同时,要提醒用户替换成自己的AppKey,并配置安全域名。此外,需要注意异步操作的处理,比如使用async/await或者Promise。 最后,生成相关问题,可能需要考虑性能优化、错误处理、UI展示等方面,以及与其他功能的结合,比如点聚合或行政区域高亮,如引用[3]所述。 总结步骤: 1. 配置高德地图AppKey和安全域名。 2. 获取用户当前位置的经纬度。 3. 调用高德地图的周边搜索API。 4. 处理返回数据,展示附近位置列表。 5. 错误处理,包括定位权限、密钥错误等。</think>### 实现步骤说明 #### 1. 高德地图配置准备 - 注册高德开放平台账号并创建Web端应用,获取`Web端Key`[^3][^5] - 在`manifest.json`中添加H5配置: ```json "h5": { "template": "/* 模板路径 */", "devServer": {}, "sdkConfigs": { "maps": { "amap": { "key": "你的高德地图Web端Key" } } } } ``` #### 2. 获取定位权限 ```javascript // 获取用户地理位置 async function getLocation() { try { const res = await uni.getLocation({ type: 'gcj02', // 必须使用高德坐标系 altitude: true }); return { latitude: res.latitude, longitude: res.longitude }; } catch (error) { console.error('定位失败:', error); // 可降级使用IP定位(需自行实现) return { latitude: 39.90923, longitude: 116.397428 }; // 默认北京坐标 } } ``` #### 3. 调用周边搜索API ```javascript async function searchNearbyPOI(keywords = '餐饮|酒店|商场') { const location = await getLocation(); const url = `https://restapi.amap.com/v3/place/around?key=你的Key&location=${location.longitude},${location.latitude}&radius=1000&keywords=${keywords}`; return new Promise((resolve, reject) => { uni.request({ url, success: (res) => { if(res.data.status === '1') { resolve(res.data.pois); // 返回POI列表 } else { reject(res.data); // 处理API错误 } }, fail: (err) => reject(err) }); }); } ``` #### 4. 数据解析示例 ```javascript // 处理返回数据结构示例 const poiList = await searchNearbyPOI(); const formattedData = poiList.map(item => ({ id: item.id, name: item.name, address: item.address, distance: item.distance + '米', location: item.location.split(',') // 经纬度数组 })); ``` #### 5. 错误处理要点 - 密钥校验失败:检查`Web端Key`绑定域名是否包含当前H5域名 - 定位超时:建议设置10秒超时限制 - 权限拒绝:引导用户手动授权或提供坐标输入功能[^4] - 网络异常:添加重试机制 ### 完整示例代码 ```html <template> <view> <button @click="loadNearby">获取附近位置</button> <view v-for="item in poiList" :key="item.id"> <text>{{ item.name }}</text> <text>{{ item.address }}</text> </view> </view> </template> <script> export default { data() { return { poiList: [] } }, methods: { async loadNearby() { try { const res = await this.searchNearbyPOI(); this.poiList = res.map(item => ({ id: item.id, name: item.name, address: item.address || '暂无地址信息', distance: item.distance + '米' })); } catch (error) { uni.showToast({ title: '加载失败,请重试', icon: 'none' }); } }, // 复用前文searchNearbyPOI方法 } } </script> ``` ### 注意事项 1. 必须配置H5域名白名单(高德控制台 > 应用管理 > 设置) 2. 推荐添加地图交互组件(需引入高德地图JS API) 3. 建议实现分页加载(通过`page`参数控制) 4. 实时定位需注意性能优化(节流处理)
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值