根据地理位置权限更改 HTML 元素的可见性 [重复]

Posted 2023-02-23

【中文标题】根据地理位置权限更改 HTML 元素的可见性 [重复]

【英文标题】：Changing visibility of HTML elements based on geolocation permission [duplicate]

【发布时间】：2019-02-26 22:23:43

【问题描述】：

如果最终用户不同意让浏览器知道他们的位置，我正在尝试使 html 元素可见。但是，当拒绝浏览器的请求时，我当前的代码不起作用（console log 也不起作用）。但是当允许浏览器访问我的位置时，对 Google Places 的 API 调用有效。

总结一下：如果用户拒绝浏览器的请求，我希望geolocationunavail 的visibility 是visible，而不是hidden。

HTML

<div id="geolocationunavail"> 
    <p>Don't want to share your location?</p>
    <p><span>That's cool.</span> Type a location below.</p>
</div>

CSS

#geolocationunavail 
    visibility: hidden;

JS

function getUserLocation() 
    if(navigator.geolocation)
        navigator.geolocation.getCurrentPosition(function(position) 
            document.querySelector("#longitude").value = position.coords.longitude;
            document.querySelector("#latitude").value = position.coords.latitude;
            var lng = position.coords.longitude;
            var lat = position.coords.latitude; 
            var latlng = new google.maps.LatLng(lat, lng);
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( 'latLng': latlng , function (results, status) 
                if (status !== google.maps.GeocoderStatus.OK) 
                    alert(status);
                
                if (status == google.maps.GeocoderStatus.OK) 
                    console.log(results);
                    var address = (results[0].formatted_address);
                    document.querySelector("#citysearch").value = address;
                
            );
        );
     else 
        console.log("Geolocation is not supported by this browser.");
        document.getElementById("geolocationunavail").style.display = "visible";
    

【参考方案1】：

看起来你有两个不同的问题，所以我会同时解决它们：

首先，您的地理定位功能未按预期工作。发生这种情况是因为您没有正确使用该功能。您不希望使用 else 语句说地理位置不起作用，因为地理位置将始终“起作用”，因为无论用户输入如何，它都会成功调用。即使用户选择“阻止”该功能在技术上“有效”，因此也不会运行 else 语句。

其次，您的可见性切换不正确。有两种方法可以解决此问题。您可以将其设为类并使用classList.toggle("myClass")，也可以使用document.getElementById('geolocationunavil').style.visibility = 'visible';

这两者放在一起将导致：

function getUserLocation() 
navigator.geolocation.getCurrentPosition(
    position => 
        document.querySelector("#longitude").value = position.coords.longitude;
        document.querySelector("#latitude").value = position.coords.latitude;
        var lng = position.coords.longitude;
        var lat = position.coords.latitude; 
        var latlng = new google.maps.LatLng(lat, lng);
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode( 'latLng': latlng , function (results, status) 
            if (status !== google.maps.GeocoderStatus.OK) 
                alert(status);
            
            if (status == google.maps.GeocoderStatus.OK) 
                console.log(results);
                var address = (results[0].formatted_address);
                document.querySelector("#citysearch").value = address;
            
        );
    ,
    err => 
        console.log("Geolocation is not supported by this browser.");
        document.getElementById("geolocationunavail").style.visibility = "visible";
    )