Question

如果最终用户不同意让浏览器知道其位置，则我试图使HTML元素可见。但是，当我拒绝浏览器的请求时，我当前的代码不起作用（console log也不起作用）。但是，当允许浏览器访问我的位置时，可以对Google地方信息进行API调用。

总结：如果用户拒绝浏览器的请求，我希望visibility中的geolocationunavail是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";
    }
}

Answer 1

您似乎有2个不同的问题，所以我将同时解决这两个问题：

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

第二，您的可见性未正确切换。您可以通过2种方法解决此问题。您可以将其设为一类并使用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";
    })
}

根据地理位置许可更改HTML元素的可见性

1 个答案: