如何确保JavaScript代码正确处理Geolocation API异步回调及服务区判断

核心问题分析 #

你的代码问题出在异步回调的作用域和变量引用错误：

• Geolocation API的getCurrentPosition是异步执行的，你尝试在回调函数外部使用$latitude、$longitude，这些变量不仅命名错误（你定义的是latitude、longitude），而且回调外的代码会在位置获取完成前就执行，根本拿不到有效数据。
• 你定义的polygone只有两个坐标点，这是一条直线而非闭合多边形，会导致isPointInPoly函数无法正确判断区域。

修正后的完整代码 #

// 定义闭合多边形区域（至少3个点，建议最后一个点与第一个点重合保证闭合）
const polygone = [
    [43.163834, -84.134153],
    [43.163834, -83.420042],
    [42.900000, -83.420042],
    [42.900000, -84.134153],
    [43.163834, -84.134153]
];

function isPointInPoly(point, vs) {
    let x = point[0], y = point[1];
    let inside = false;
    for (let i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        const xi = vs[i][0], yi = vs[i][1];
        const xj = vs[j][0], yj = vs[j][1];
        const intersect = ((yi > y) !== (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }
    return inside;
}

// 处理地理定位与区域判断
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
        
        // 直接在回调内执行区域判断和UI更新
        const isInServiceArea = isPointInPoly([latitude, longitude], polygone);
        $("#output").html(isInServiceArea ? 'Yup' : 'Nope');
    }, function(error) {
        // 增加错误处理，覆盖用户拒绝授权等异常场景
        switch(error.code) {
            case error.PERMISSION_DENIED:
                $("#output").html('你拒绝了位置授权，无法判断服务区');
                break;
            case error.POSITION_UNAVAILABLE:
                $("#output").html('无法获取你的位置');
                break;
            case error.TIMEOUT:
                $("#output").html('获取位置超时');
                break;
        }
    });
} else {
    $("#output").html("你的浏览器不支持地理定位");
}

关键修正点 #

• 异步逻辑处理：将区域判断和UI更新代码完全放入getCurrentPosition的成功回调中，确保只有拿到有效经纬度后才执行判断。
• 变量修正：移除错误的$前缀，直接使用回调内定义的latitude和longitude变量。
• 多边形修正：补充坐标点形成闭合多边形，保证区域判断逻辑的有效性。
• 错误处理补充：添加定位失败的回调函数，处理用户拒绝授权、位置不可用等异常情况。

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