uniapp中地图使用

记录自己在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('获取信息失败,请重试!')
						}
					}
				})
			},

你可能感兴趣的:(uni-app,javascript,前端)