位置在服务器上不起作用

Question

我在使用 Google 位置服务时遇到问题，问题是我所做的看起来不错，并且在 localhost 上运行良好，但是当我将所有内容移至服务器以从我的域访问它们时，一切仍然有效除了位置跟踪器...

这是代码：（仅重要部分）

            <div style="margin-top:50px; max-width:650px; margin-left:auto; margin-right:auto;">
            <p id='frasePermitir' style='font-size: 140%; text-align: center;'>Permita el acceso a su ubicaci&oacute;n para registrar el caso</p>
            <p id='fraseNombreCiudad' style='font-size: 120%;'></p>
            <input type='hidden' name='usrLat' id='usrLat' value='' />
            <input type='hidden' name='usrLon' id='usrLon' value='' />
            <input type='hidden' name='usrCity' id='usrCity' value='' />
            <!--<div id="map" style='align-content:center;'></div>-->
            <input type='button' class="fileUpload btn btn-warning" value='Permitir' id='btnPermitir' onclick='crgUbicacion();' />
            <div id='divCargando' style='display:none;'>
                <div class="loader" id="loader" style='width:30px; height:30px;'></div>
            </div>
        </div>

        <div style="margin-top:50px; max-width:650px; margin-left:auto; margin-right:auto; text-align:center;">
            <button type="submit" id="btnEnviar" class="btn btn-info" class="btn btn-default" onclick="return checkDat();"><b>Enviar datos</b></button>
        </div>

    </form> <!--aqui termina el formulario de datos-->

    <script>
        function crgUbicacion() { //se cambio el nombre de la funcion initMap() -> crgUbicacion(), porque sino no lo toma el onclick del btn
            var divCrg = document.getElementById("divCargando");
            divCrg.style = "width:50px; height:50px; float:left;";

            /*var map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 6
            });
            var infoWindow = new google.maps.InfoWindow({map: map});*/

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    /*se llenan los input hidden que contienen la latitud y logitud*/
                    var usrLat = document.getElementById("usrLat");
                    var usrLon = document.getElementById("usrLon");
                    usrLat.value = position.coords.latitude;
                    usrLon.value = position.coords.longitude;

                    /*con esto se obtiene el nombre de la localidad*/
                    var geocoder = new google.maps.Geocoder;
                    geocoder.geocode({
                        'location': pos
                        // ej. "-34.653015, -58.674850"
                        }, function(results, status) {
                            // si la solicitud fue exitosa
                            if (status === google.maps.GeocoderStatus.OK) {
                                // si encontró algún resultado.
                                if (results[1]) {
                                    var usrCity = document.getElementById("usrCity");
                                    usrCity.value = results[1].formatted_address;
                                    document.getElementById("fraseNombreCiudad").innerHTML = "Tu ubicaci&oacute;n es <span style='color:#298A08'>"+results[1].formatted_address+".</span>";
                                    document.getElementById("frasePermitir").innerHTML = "Listo, ya tenemos tu ubicaci&oacute;n";
                                    document.getElementById("btnPermitir").style = 'display:none;';
                                    //se oculta el icono de carga
                                    divCrg.style = "display:none;";
                                }
                            }
                        });
                    /*---------------------------------------------*/

                    /*infoWindow.setPosition(pos);
                    infoWindow.setContent('Encontramos tu ubicaci&oacute;n!');
                    map.setCenter(pos);*/
                }, function() {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
              // Browser doesn't support Geolocation
              handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                                  'Error: The Geolocation service failed.' :
                                  'Error: Your browser doesn\'t support geolocation.');
        }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=---MYKEYYYY---&callback=initMap">
    </script>

钯。我从最后一个链接中删除了 api-key 以在此处发布，这不是错误。

谢谢大家！问候！

Answer 1

是的，您的代码没有问题，但问题可能仅出在您的域 ssl 证书上，浏览器现在要求您的网站拥有 SSL 证书，以便您获取用户的位置数据。检查你的浏览器控制台，我相信你会发现这个错误，但是如果你尝试在 Edge 浏览器上运行你的脚本，我相信它会工作