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

Posted 2023-02-23

【中文标题】如何隐藏或集成地理定位权限弹出到按钮（Javascript + HTML）

【英文标题】：How to hide or integrate geolocation permission pop up into a button (Javascript + HTML)

【发布时间】：2020-10-08 03:00:31

【问题描述】：

我打算使用“允许访问我的位置”按钮来发送用户地理位置的权限请求。而不是用户单击弹出的网页，这可能看起来没有集成到整个 Web 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);
        

【参考方案1】：

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

那是因为你做不到。

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