Question

我试图在codepen中实现一个简单的天气应用程序。该应用程序在localhost上正常工作它要求使用navigator.geolocation的许可，如果接受它显示天气，但在codepen上，它甚至没有要求许可。

这是链接

这是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);
            });

        });
    }
};

有人能告诉我为什么codepen不会要求许可吗？

Answer 1

我在同一个挑战中遇到了同样的问题。只需将您的codepen添加到https而不是http，您就可以了。

像这样：

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

如果你想使用它：

navigator.geolocation.getCurrentPosition();

Chrome中的

。

Answer 2

根据Chrome中的控制台：

在不安全的起源上不推荐使用
getCurrentPosition（）和watchPosition（）。要使用此功能，您应该考虑将应用程序切换到安全的来源，例如HTTPS。

此处有更多详细信息：https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins基本上Chrome只想通过HTTPS发送位置信息。但是，为了让开发人员能够测试他们将localhost视为安全网络。希望这可以帮助！

Answer 3

从Chrome 50开始，Chrome停止支持不安全协议上的地理位置。 https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only

javascript - 地理位置无法在codepen中运行

3 个答案: