javascript - 地理定位在代码笔中不起作用

Question

我正在尝试在 codepen 中实现一个简单的天气应用程序。该应用程序在本地主机上运行良好它请求使用 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

我在同一个挑战中遇到了同样的问题。只需在代码笔前加上 https 而不是 http 就可以了。

像这样:

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

如果你想使用这个:

navigator.geolocation.getCurrentPosition();

在 Chrome 中。