Uniapp之使用高德地图开发(二)-逆地理坐标解析

淡水海岸
656 阅读2分钟

在添加了相应平台Key和配置了manifest.json文件后，即可开始使用相应Api来获取位置、解析位置和逆解析坐标等操作了。

Uniapp中，常用的与位置有关的API有uni.getLocation()，uni.chooseLocation()，uni.onLocationChange()等。在本文章中，将以uni.chooseLocationAPI作为范例，实现一个快递地址的添加和编辑功能。

image.png

选择地址

画出前端界面

image.png

这里因为我需要获取行政区编码和经纬度数据，所以采取的是只允许点击右边选择地址按钮进行选择，输入框是禁用输入的。这里主要功能就是获取经纬度，然后调用高德的逆坐标解析接口，获取更多的位置信息。（当然，这里实际是根据业务需求来的，如果uni.chooseLocation返回的数据够用就可以不用再次调用解析坐标了）

// 打开选择地址-获取地址的经纬度信息
uni.chooseLocation({
    success: res => {
        this.latitude = res.latitude; //纬度
        this.longitude = res.longitude; //经度
        this.getLocationInfo();
    },
    fail: err => {
        console.log(err);
    }
});

地理坐标解析

拿到地址的经纬度坐标后，即可调用高德的逆解析坐标API了。

**注意：**逆解析是需要配置高德WEB服务key的，即服务平台为【WEB服务】的Key

逆解析坐标API请求：

restapi.amap.com/v3/geocode/…

// 根据经纬度逆解析坐标信息
let map_key = '0c7c70xxxxxxx07aeb9f2f221c49180'  // 高德WEB服务Key

async getLocationInfo() {
    this.chooseAddress = '定位中...';
    const [error, res] = await uni.request({
        url: `https://restapi.amap.com/v3/geocode/regeolocation=${this.longitude},${this.latitude}&key=${map_key}`
    });
    if (res.data.status === '1') {
        const addressComponent = res.data.regeocode.addressComponent;
        this.chooseAddress = res.data.regeocode.formatted_address;
        this.model.area_text=`${addressComponent.province}-${addressComponent.city.length ? addressComponent.city : addressComponent.province}-${addressComponent.district}`;
        this.model.province_name=`${addressComponent.province}`;
        this.model.city_name=`${addressComponent.city.length ? addressComponent.city : addressComponent.province}`;
        this.model.area_name=`${addressComponent.district}`;
        this.model.address = res.data.regeocode.formatted_address.replace(
	`${addressComponent.province}${addressComponent.city}${addressComponent.district}`,'');
    } else {
	console.log('%c逆地址解析失败，请检查是否在env中配置地图key','color:green;background:yellow');
    }
}

关于地理编码解析相关接口的信息，建议直接阅读高德开放平台-地理/逆地理编码文档

到这里已经可以获取到选择的位置的非常详细的信息，这里没有什么难点，有时可能会出现打不开地图或者打开地图没有位置信息等，通常都是高德地图的Key配置的问题，建议多阅读uniapp位置相关文档和检查高德Key的配置。

avatar
文章
阅读
粉丝