如何隐藏或集成地理位置权限弹出按钮 (Javascript + HTML)

Question

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

IMAGE: pop up window shows up after I clicked on the button

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

下面是一个简单按钮的 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

But I can't seem to bypass the pop up like shown in the image below.

那是因为你做不到。

浏览器决定如何将其呈现给用户。你别无选择。另外，请务必注意，它的显示方式因平台而异。

如何隐藏或集成地理位置权限弹出按钮 (Javascript + HTML)

How to hide or integrate geolocation permission pop up into a button (Javascript + HTML)

html

javascript

geolocation