关于DMM实现定位功能(四)---实现周围地址的显示

今天打算用定位功能实现一个周围位置的显示,来选择地点,加在懂苗木的发布动态上,如下图

那如何获取到用户的当前信息了???我采用了逆地理编码获取周围位置信息,首先可以参考逆地理编码的文档

我使用了

https://restapi.amap.com/v3/geocode/regeo?key=<用户创建的webKey>&extensions=all&location=“经度“,“纬度“

关于WEBKey的获取,可以跟当初获取key值一样,只是平台不一样,方法都是一样的;

重点在于个人经纬度的获取,经纬度是否准确,才能够获取到个人周围的信息;

代码实现:

// 逆地理编码获取周围位置信息
export const getAddress = (lng, lat) => {
    fetch(
        `https://restapi.amap.com/v3/geocode/regeo?key=${AdConfig.GeolocationWEB}&extensions=all&location=${lng},${lat}`,
        {
            method: 'GET',
        },
    )
        .then(response => response.json())
        .then(result => {
            console.log('逆地理编码获取resultxxxxxx', result);
        })
        .catch(error => {
            console.log('逆地理编码获取errorxxxxx', error);
        });
};

其中extensions是返回结果控制,有两个取值参数,如下

extensions 参数默认取值是 base，也就是返回基本地址信息；

extensions 参数取值为 all 时会返回基本地址信息、附近 POI 内容、道路信息以及道路交叉口信息。

实现:

// 获取当前地理位置信息
    getCurrentPosition()
        .then(res => {
            getAddress(res.coords?.longitude, res.coords?.latitude); // 获取经纬度,来获取周围位置
            if (res.coords?.latitude) {
                setLocation(res);
            }
            const { city, address } = res?.location;
            setCityName(city);
            setAddressDetails(address);
        })
        .catch(err => {
            Toast.show({ content: '当前定位失败' });
        });

然后前端控制台返回的数据如下:

前端在取数据到页面上,基本用户范围位置信息就出来了;我觉的用这个api可以来进行一个搜索位置到功能开发

下一篇:关于DMM实现定位功能(五)