如何隐藏或集成地理定位权限弹出到按钮（Javascript + HTML）

Question

我打算使用“允许访问我的位置”按钮来发送用户地理位置的权限请求。 而不是用户点击一个网页弹出，它可能看起来没有集成到整个 Web UI 中。 但我似乎无法绕过如下图所示的弹出窗口。

IMAGE：单击按钮后弹出窗口出现

我更喜欢让用户单击按钮，它会一次性授予权限并绕过弹出窗口。

下面是一个简单按钮的 HTML 代码，以及用于检索用户位置的相关 Javascript 代码。 里面的一些代码是用于其他功能的，我非常愿意接受编码实践等方面的反馈。

HTML代码

<button id = "allow-Geolocation">Allow Access To My Location</button>

Javascript代码

        function allowGeolocation() {
            userLocation = new google.maps.InfoWindow();

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(p) {
                    var avatarPosition = {
                        lat: p.coords.latitude,
                        lng: p.coords.longitude
                    };
                    var infoWindowPosition = {
                        lat: avatarPosition.lat + 0.04,
                        lng: avatarPosition.lng
                    };
                    userLocation.setPosition(infoWindowPosition);
                    userLocation.setContent('Your Location');
                    setTimeout(function(){userLocation.close();}, 2000);
                    
                    //set User Avatar
                    userAvatar = new google.maps.Marker({
                        position: avatarPosition,
                        icon: 'https://i.imgur.com/h2tTqOb.png',
                        draggable: true,
                        animation: google.maps.Animation.DROP,
                        map:map
                    });
                    userAvatar.addListener('mouseover', toggleBounce);
                    userAvatar.addListener('dragend', radiusSearch);
                    userLocation.open(map);
                }, function() {
                    handleLocationError('Geolocation service failed', map.center());
                })
            }
            else {
                handleLocationError('No geolocation available', map.center());
            }
        }
        document.querySelector('#allow-Geolocation').addEventListener('click', allowGeolocation);
        

Answer 1

但我似乎无法绕过如下图所示的弹出窗口。

那是因为你不能。

浏览器决定如何将其呈现给用户。 在这方面你别无选择。 此外，重要的是要注意它的显示方式因平台而异。