JavaScript - 地理定位不能在codepen中工作 [英] javascript - geolocation not working in codepen

问题描述

我试图在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 =FConclick =convert（）> C< / span>'）; 
 $（'＃condition'）。html（json.weather [0] .main）; 
}）; 
 
}）; 
} 
}; 
  

任何人都可以告诉我为什么codepen不要求权限？

解决方案

我对同一个挑战有同样的问题。简单地用https代替你的codepen而不是http，你会没事的。

像这样：

< a href =https://codepen.io/crownedjitter/pen/AXzdvQ> https://codepen.io/crownedjitter/pen/AXzdvQ

如果你想使用这个：

  navigator.geolocation.getCurrentPosition（）; 
  

在Chrome中。

I'm trying to implement a simple weather app in codepen. The app works fine on localhost It asks for permission to use navigator.geolocation and if accepted it shows the weather, but on codepen it's not even asking for permission.

here is the link

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

Here is the JS function

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

        });
    }
};

Can anybody tell me why codepen is not asking for permission?

解决方案

I had this same problem on the same challenge. Simply prepend your codepen with https instead of http and you'll be fine.

Like this:

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

if you want to use this:

navigator.geolocation.getCurrentPosition();

in Chrome.

这篇关于JavaScript - 地理定位不能在codepen中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！