uniapp: H5 locates the current provincial, urban and street information

Gaode map api, H5 locates street information in provinces, cities and districts.

Since uniapp uni.getLocationcannot obtain street information of provinces, cities and districts in H5, here we use AutoNavi’s inverse geocoding interface address interface to obtain street data of provinces, cities and districts by passing key and current latitude and longitude.

Note here: **高德地图API 申请的key,必须是WEB服务端**, you can use the reverse address encoding interface.
insert image description here

uni.getLocation({
    
    
	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
	geocode: true,
	success: (res) => {
    
    
		// #ifdef APP-PLUS
		this.city = res.address.city;
		// #endif
		this.latitude = res.latitude;
		this.longitude = res.longitude;
		// #ifdef H5
		uni.request({
    
    
			url: 'https://restapi.amap.com/v3/geocode/regeo', //逆地理编码接口地址。
			data: {
    
    
				key: 'eb144****************f2e0c',
				//location:经纬度  lng :经度  lat:纬度  
				location: this.longitude + ',' + this.latitude,
				radius: 1000,
				extensions: 'all',
				batch: false,
				roadlevel: 0
			},
			success: (res) => {
    
    
				console.log(res.data);
				//详细地址信息
				if (res.statusCode == 200 && res.data.info == 'OK') {
    
    
					this.city = res.data.regeocode.addressComponent.city
				}
			}
		});
		// #endif
	},
});

insert image description here

Guess you like

Origin blog.csdn.net/qq_40745143/article/details/131956543