gratis - javascript-la geolocalización no funciona en el codepen

geolocation react native

Question

Estoy tratando de implementar una aplicación meteorológica simple en el codepen. La aplicación funciona bien en localhost. Solicita permiso para usar navigator.geolocation y, si se acepta, muestra el clima, pero en el codepen, ni siquiera está pidiendo permiso.

aqui esta el link

http://codepen.io/asamolion/pen/BzWLVe

Aquí está la función JS

function getWeather() {
    ''use strict'';
    $(''#getWeatherButton'').hide();
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var url = ''http://api.openweathermap.org/data/2.5/weather?APPID=53ac88144e6ee627ad0ed85277545ff9'';
            //            var url = ''example.js'';
            var apiCall = url + ''&lat='' + position.coords.latitude + ''&lon='' + position.coords.longitude;
            //            window.location.href = apiCall;
            $.getJSON(apiCall, function (json) {
                setSkycon(parseInt(json.weather[0].id, 10));
                $(''#location'').html(json.name + '', '' + json.sys.country);
                var temp = (Math.round((json.main.temp - 273.15) * 100) / 100);
                $(''#temp'').html(temp + ''<span id="degree">&deg;</span><span id="FC" onclick="convert()">C</span>'');
                $(''#condition'').html(json.weather[0].main);
            });

        });
    }
};

¿Alguien puede decirme por qué el codepen no está pidiendo permiso?

Answer 1

De acuerdo con la consola en Chrome:

getCurrentPosition () y watchPosition () están en desuso en orígenes inseguros. Para utilizar esta función, debería considerar cambiar su aplicación a un origen seguro, como HTTPS.

Hay más detalles aquí: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins Esencialmente, Chrome solo desea enviar información de ubicación a través de HTTPS. . Sin embargo, para permitir que los desarrolladores prueben, tratan el localhost como si fuera una red segura. ¡Espero que esto ayude!

Answer 2

Tuve el mismo problema en el mismo desafío. Simplemente anteponga su codepen con https en lugar de http y estará bien.

Me gusta esto:

https://codepen.io/crownedjitter/pen/AXzdvQ

si quieres usar esto:

navigator.geolocation.getCurrentPosition();

en Chrome.

Answer 3

A partir de Chrome 50, Chrome dejó de admitir la geolocalización en protocolos no seguros. https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only