uni-app小程序开发-支付宝小程序获取定位及选择城市和地区

发表于 | 分类于
uni-app小程序开发-支付宝小程序获取定位及选择城市和地区

查看版本

1
2
3
4
5
6
// #ifdef  MP-ALIPAY
const sdkVersion = my.SDKVersion;
console.info('基础库版本:', sdkVersion);
const clientVersion = my.env.clientVersion || my.getSystemInfoSync().clientVersion;
console.info('客户端版本:', clientVersion);
// #endif

获取定位

这个只能获取到经纬度，要想获取所在位置，需要自己调用百度或高德的API反查。

1
2
3
4
5
// #ifdef  MP-ALIPAY
my.getLocation((loc) => {
    console.log(loc);
});
// #endif

选择城市

只选择城市

不设置默认城市名的情况下，推荐使用该方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
chooseCity() {
    // #ifdef  MP-ALIPAY
    my.chooseCity({
        showLocatedCity: true,
        setLocatedCity: false,
        success: (res) => {
            let { city, adCode } = res;
            console.info('city:', city);
            console.info('adCode:', adCode);
        },
        fail: (error) => {
            console.log(error);
        }
    });
    // #endif
}

注意

setLocatedCity: false：因为我们不设置默认地址直接用支付宝获取到的，所以要设置为false，否则会出现点击你所在地区触发重新定位获取城市名的问题。

获取城市设置城市名

设置showLocatedCity: true后，点击你所在地区会触发重新定位，我们可以根据定位到的坐标，反查所在城市，设置城市名称，城市名称可以随便定义，但是不建议。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
setLocatedCity() {
    // #ifdef  MP-ALIPAY
    const chooseCityTask = my.chooseCity({
        // 是否显示当前定位城市
        showLocatedCity: true,
        showHotCities: true,
        // 是否修改当前定位城市
        setLocatedCity: true,
        success: (res) => {
            console.log(`chooseCity: ${JSON.stringify(res)}`);
        },
        fail: (error) => {
            console.log('选择失败', `${JSON.stringify(error)}`);
        },
        complete: () => {
            console.log('complete回调');
        }
    });

    const onLocatedCompleteCallback = (locatedCompleteRes) => {
        const { longitude, latitude } = locatedCompleteRes;
        // 这里是自己处理根据经纬度反查出正确的城市名，也可以随便定义，不推荐随便定义。
        let cityName = '郑州';
        chooseCityTask.setLocatedCity({
            locatedCityName: cityName, // 修改默认定位城市名
            sucess() {
                console.log('修改成功');
            },
            fail() {
                console.log('修改失败');
            },
            complete() {
                chooseCityTask.offLocatedComplete(onLocatedCompleteCallback);
            }
        });
    };
    chooseCityTask.onLocatedComplete(onLocatedCompleteCallback);
    // #endif
},

选择地区

https://opendocs.alipay.com/mini/00nd0d

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
chooseCity() {
    // #ifdef  MP-ALIPAY
    my.chooseCity({
        showLocatedCity: true,
        setLocatedCity: false,
        success: (res) => {
            let { city, adCode } = res;
            console.info('city:', city);
            console.info('adCode:', adCode);
        },
        fail: (error) => {
            console.log(error);
        }
    });
    // #endif
}

返回数据格式

image-20240723113122492