如何在用户拒绝位置权限时将其重定向至其他页面

我基于Stack Overflow示例修改了一段浏览器端代码，用于获取用户当前位置并跳转至对应页面，代码如下：

<button onclick="getLocation()">Use Current Location</button>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(redirectToPosition);
    } else { 
        window.location.href = "map_text_mobile.php";
    }
}

function redirectToPosition(position) {
    window.location='weatherDemo.php?lat='+position.coords.latitude+'&lon='+position.coords.longitude;
}
</script>

遇到的问题 #

这段代码在用户未拒绝过位置权限时运行正常，但如果用户已拒绝权限，点击按钮后无任何响应，else分支从未触发。我希望此时能直接将用户重定向到地图页面，让用户通过点击地图选择目标位置（获取当前位置只是便捷选项，用户始终可以通过地图指定位置）。

经分析，问题出在navigator.geolocation始终返回真值，导致else分支无法触发。尝试过其他判断权限状态的代码，但权限被拒绝时点击按钮仍无反应。由于用户很难修改已拒绝的权限设置，必须引导用户进入地图流程，避免无响应状态。

尝试的过渡方案 #

我试过下面这段代码，虽然能正常触发权限拒绝的提示，但在权限已授予时响应速度较慢：

<button onclick="test()">Test</button> test for denied<br><br>

<script>
function test(){
    navigator.geolocation.watchPosition(function(position) {
        getLocation();
    },
    function(error) {
        if (error.code == error.PERMISSION_DENIED)
            alert("Alert message here");
    });
}
</script>

最优解决方案 #

最终找到的可行且响应速度符合要求的代码：

<button onclick="test5()">Test5</button> using query<br><br>

<script>
function test5(){
    navigator.permissions.query({ name: "geolocation" }).then((result) => {
        if (result.state === "denied") {
            alert("Permissions have been set to denied. Either change that our use the map method to set locations. You can change that in your browser settings, site settings, location, blocked.");
            // 可直接替换为跳转地图页面的逻辑
            // window.location.href = "map_text_mobile.php";
        } else {
            getLocation();
        }
    });
}
</script>

通过navigator.permissions.query直接查询地理定位权限状态，能快速判断并执行对应逻辑：权限拒绝时提示用户并引导到地图流程，权限正常时调用原有的获取位置方法。

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