uniapp中地图使用

无尘本无物

已于 2023-06-07 09:53:53 修改

阅读量534

点赞数 1

文章标签： uni-app javascript 前端

于 2023-03-27 17:29:31 首次发布

本文链接：https://blog.csdn.net/m0_45884629/article/details/129799798

版权

文章介绍了如何在uniapp应用中获取用户当前定位，并将经纬度转化为城市信息。通过调用uni.getLocation接口获取WGS84坐标系下的经纬度，然后利用高德地图API进行逆地理编码，得到详细的地址信息。

摘要由CSDN通过智能技术生成

记录自己在uniapp中使用地图

1.获取用户当前定位

usergetLocation() {
				const _this = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //该参数是为了获取经纬度城市信息
					success: function(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
						_this.loadCity(res.longitude, res.latitude)
						_this.getStores(res.longitude, res.latitude)
						console.log('当前位置的经度：' + _this.longitude);
						console.log('当前位置的纬度：' + _this.latitude);
					},
					fail: function() {
						uni.showToast({
							title: '获取地址失败，请手动选择地址',
							icon: 'none'
						})
					}
				});
			},

2.经纬度转化成城市信息

loadCity(longitude, latitude) {
				const _this = this;
				// console.log(longitude, latitude);
				uni.request({
					header: {
						'Content-Type': 'application/text',
					},
					//这里的key值需要高德地图web服务生成的key
					url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
						longitude +
						',' +
						latitude +
						'&key=' +
						MAP_KEY +
						'&radius=1000&extensions=all',
					success(res) {
						if (res.statusCode === 200) {
							this.provinceName = res.data.regeocode.addressComponent.province;
							this.cityName = res.data.regeocode.addressComponent.city;
							this.districtName = res.data.regeocode.addressComponent.district;
							this.townshipName = res.data.regeocode.addressComponent.township;
							_this.useradress = `${this.provinceName}-${this.cityName}-${this.districtName}`;
							_this.areaVal = _this.useradress;
							// console.log('获取中文街道地理位置成功', this.provinceName, this.cityName, this.districtName, this
							// 	.townshipName)
						} else {
							console.log('获取信息失败，请重试！')
						}
					}
				})
			},