Question

嗨，我是编程新手。

我想实现以下目标，

在单击按钮时，它应该显示一个本机浏览器弹出窗口，询问用户位置许可。接受许可应将按钮显示为绿色。并且如果用户想要禁止位置共享，则可以使用相同的按钮来实现。

到目前为止我尝试过什么？

下面是代码，

class location extends react.purecomponent {
    state = {
        active: false,
    };

    componentdidMount() {
        navigator.permissions.query({name:'geolocation'}).then((result) => 
        {
            if (result.state === 'granted') {
                this.setState({active: true});
            } else if (result.state === 'prompt') {
                this.setState({active: false});
            } else if (result.state === 'denied') {
                this.setState({active: false});
            }
        });
    }

    show_position = (position) => {
        return position.coords.latitude;
    };

    handle_my_location = () => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(this.show_position, 
            null);
        } else {
            console.log("unavailable");
        }
    };
    render = () => {
        return (
            <button type="button" className={'icon' + (this.state.active ? '   active': '')} onClick={this.handle_my_location}}>
                <Svg width="16"/>
            </button>
        );
    };
}

现在的问题是我如何使用相同的按钮撤消权限（拒绝位置共享），这意味着在handle_my_location方法中如何检查用户是否要撤消或允许位置共享。如果要撤消，则应致电

navigator.permissions.revoke({name:'geolocation'});

更好地解释用例。考虑用户首次登录该应用程序。单击按钮。它显示位置共享弹出窗口。用户允许位置共享。该按钮处于活动状态。现在，如果用户要撤消权限（意味着不允许位置共享），请单击同一按钮，然后如何在handle_my_location方法中撤消权限。

有人可以帮我这个忙吗？谢谢。

Answer 1

您可以进行基于状态的检查。如果活动状态不是true，则可以请求位置，但是如果活动状态是true，则表示您已经具有位置，并且可以撤消权限。你可以做这样的事情

handle_my_location = () => {
        if(!this.state.active) {

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(this.show_position, 
            null);
        } else {
            console.log("unavailable");
        }
       } else {
           navigator.permissions.revoke({name:'geolocation'});

        }
    };

如何在响应中使用同一按钮允许位置权限和撤销权限？

1 个答案: