如何使用Promises和逆地理编码通过jQuery获取用户位置？

我来帮你梳理并完善这段获取用户位置、提取邮政编码并调用地图的代码，确保逻辑严谨且符合需求：

• 给#collection-search-geolocation按钮绑定点击事件，先阻止默认跳转行为
• 用getCurrentLocation()返回的Promise异步处理位置数据
• 从逆地理编码结果的地址组件中精准提取邮政编码
• 将拿到的邮编传入callCollectionMap()方法完成后续地图渲染

// 获取用户当前位置
$("#collection-search-geolocation").click(function (event) {
    event.preventDefault();
    
    getCurrentLocation()
        .then(function(results) {
            console.log('位置获取成功');
            const zipcode = extractZipcode(results);
            if (zipcode) {
                callCollectionMap(zipcode);
            } else {
                console.warn('未找到对应的邮政编码');
                // 这里可以添加找不到邮编时的友好提示逻辑
            }
        })
        .catch(function(error) {
            console.error('位置获取失败:', error);
            // 用户拒绝授权或定位失败时的处理逻辑，比如提示用户手动输入邮编
        });
    
    return false;
});

function extractZipcode(results) {
    if (!results || !results[0]?.address_components) {
        return null;
    }
    const searchAddressComponents = results[0].address_components;
    const zipcodeObj = searchAddressComponents.find(function(el) {
        return el.types.includes("postal_code");
    });
    return zipcodeObj ? zipcodeObj.short_name : null;
}

// 假设你的callCollectionMap方法如下（根据实际业务调整）
function callCollectionMap(zipcode) {
    console.log('调用地图方法，传入邮编:', zipcode);
    // 这里写地图渲染的具体逻辑
}

• Promise错误处理：原代码只处理了成功回调，我添加了catch分支来捕获定位失败的场景（比如用户拒绝位置授权、浏览器不支持定位等），避免页面静默报错
• extractZipcode函数修复：原函数没有返回提取到的邮政编码，导致后续callCollectionMap拿到的是空值，现在增加了返回逻辑；同时添加了边界校验，防止传入的results数据格式异常时抛出错误
• 地址组件匹配优化：将el.types[0] == "postal_code"改为el.types.includes("postal_code")，避免types数组顺序变化导致匹配失败的问题

内容的提问来源于stack exchange，提问作者Fawn