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

Question

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

链接在这里

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

这是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视为安全网络。希望这可以帮助！