位置不适用于服务器

时间:2018-01-15 13:10:33

标签: javascript google-maps location

我在使用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>

的Pd。我从最后一个链接中删除了api-key,发布到这里,这不是错误。

谢谢大家!此致!

1 个答案:

答案 0 :(得分:1)

是的,您的代码没有问题,但问题可能只在于您的域名ssl证书,浏览器现在要求您的网站拥有SSL证书,以便您获取用户的位置数据。检查您的浏览器控制台,我确定您会发现此错误,但如果您尝试在Edge浏览器上运行您的脚本我确定它将正常工作