uniapp使用高德地图实现选择地址 h5版本

蘑菇头朵啦

已于 2024-09-30 16:23:30 修改

阅读量329

点赞数 4

文章标签： uni-app

于 2024-09-29 17:37:19 首次发布

本文链接：https://blog.csdn.net/m0_51123598/article/details/142629969

版权

前传：很恶心！！做的时候很想掀桌子，但是忍住了，只能怪自己技术不到位，因为这个东西我搞了两天，是的，就只是选择地址而已，我做了两天......下辈子不要做前端了

1、首先需要打开高德地图创建一个应用

高德地图传送门：我的应用 | 高德控制台

一共要创建两个一个【web端】一个【web服务】（web服务看情况决定是否需要添加，下面有说明）

【web】端用于填入uniapp做【web配置】的校验，不填的话用不了地图的哦，所以这一步是必须的

【web服务】则是用来反查用户选择的定位信息（比uni.chooseLocation更详细一些，如果觉得uni.chooseLocation够用那就不需要做这一步，可以直接跳过）

2、打开manifest.json找到web配置下滑到定位和地图，把你申请的【web端】的key和密钥填入

3、打开HBuilderx 随便写个按钮，直接看代码示例

注意：uni.chooseLocation是需要经纬度的，如果你已经有经纬度直接把值赋进去就可以了，如果没有请往下拉。（我就是没有传经纬度导致我地图一直白屏...服了...害我一个地址搞了两天...）

<template>
	<view class="">
		<button @click="getLocation()">获取当前的位置</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			getLocation() {
				uni.chooseLocation({
					latitude: getApp().globalData.lat,
					longitude:getApp().globalData.lng,
					success(res) {
						console.log('res', res);
					}
				})
			}
		}

	}
</script>

点击按钮后h5的地图就出来了

2.1 地图

2.2点击地址返回的数据

注意：此时是没有返回省市区的只是返回了地图上主内容和副内容以及经纬度，由于我是做收货地址需要给后端更多的字段，所以我是需要反查的，看代码，在原有的基础上加一个function，用于反查

2.3反查详细地址(直接把你从uni.chooseLocation获取到的经纬度传入就可以了)

// 转地址
turnAdrr(longs, lat) {
    // longs-纬度 lat-经度
	let _key = '你申请的【web服务】的key'; 
	uni.request({
			method: 'GET',
			url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
			data: {
				key: _key,
				location: `${longs},${lat}`,
				output: 'JSON'
			},
			success: async (res) => {
				console.log('用户所在的地理位置信息',res);
				//用户所在的地理位置信息
			},
			fail: r => {
				console.log(r);
			}
		});
}

反查出来的更详细的地址

撒花结束！！！！！！！！！！！！！！！！！！！！！！！！！！！！

4、这里是查当前的经纬度的（不需要可以不用看这部分了）

uni.getLocation({
	type: 'wgs84',
	success: function(res) {
		console.log('当前位置的经度：' + res.longitude);
		console.log('当前位置的纬度：' + res.latitude);
	},
});

注意：调试的时候最好不要用谷歌浏览器，国内可能获取位置失败，也不会用IP去测试，直接使用去访问localhost，详情见uniapp官网

传送门：uni.getLocation(OBJECT) | uni-app官网