通过浏览器获取当前地理位置

最新推荐文章于 2024-07-05 10:02:34 发布

dfdlife

最新推荐文章于 2024-07-05 10:02:34 发布

阅读量1.5k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/dfdlife/article/details/131680070

版权

在仅测试了Chrome和WindowsEdge浏览器的项目中，发现Chrome在联网情况下无法获取地理位置，但在FQ后能获取；而Edge浏览器则能即时获取。断网时，两者都无法获取位置。代码示例展示了使用GeolocationAPI进行位置获取并处理不同错误的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为项目只兼容chrome浏览器，所以只测试了chrome和windows自带的Edge浏览器，经过测试：
1、联网情况下：chrome获取地理位置失败，FQ后一分种左右可以获取回地理位置；Edge可以即时获取到地理位置
2、断网情况下：chrome和Edge浏览器均无法获取到地理位置

private beforeMount() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            this.getLocationSuccess,
            this.getLocationError
        );
    } else {
        console.log('浏览器不支持Geolocation API');
    }
}

/**
 * @description: 成功回调函数
 * @param {object} position 地理位置
 */    
private getLocationSuccess(position: any) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log('当前位置经度：' + longitude);
    console.log('当前位置纬度：' + latitude);
}

/**
 * @description: 失败回调函数
 * @param {object} error 错误信息
 */    
private getLocationError(error: any) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            console.log('用户拒绝了位置请求');
            break;
        case error.POSITION_UNAVAILABLE:
            console.log('无法获取当前位置');
            break;
        case error.TIMEOUT:
            console.log('获取位置超时');
            break;
        case error.UNKNOWN_ERROR:
            console.log('发生未知错误');
            break;
    }
}