javascript - 地理定位在codepen中不起作用

Posted 2023-02-23

【中文标题】javascript - 地理定位在codepen中不起作用

【英文标题】：javascript - geolocation not working in codepen

【发布时间】：2016-06-28 03:24:13

【问题描述】：

我正在尝试在 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 不请求许可？

【参考方案1】：

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

像这样：

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

如果你想使用这个：

navigator.geolocation.getCurrentPosition();

在 Chrome 中。

【讨论】：

我使用了不同的地理位置 API。特别是 ip-api.com，因为我发现它更容易。无论如何，谢谢。

我发现 navigator.geolocation 要准确得多。例如，您的应用将我安置在距离我实际居住地 50 英里的城市。

@Darush 为我工作。

【参考方案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 视为安全网络。希望这可以帮助！

【参考方案3】：

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