为什么CodePen上的地理位置不工作？

Question

我正在尝试为Free Code Camp创建一个天气应用程序，并且当我在本地主机上加载所有内容时它工作正常。每当我尝试在Codepen上运行它，但它不起作用。

这里的链接到我的Codepen：http://codepen.io/GeorgeMort/pen/LWpXPZ

这里是我的JS：

window.onload = function() { 
    temperature = document.getElementById("temperature"); 
    loc = document.getElementById("location"); 
    icon = document.getElementById("icon"); 

    if (navigator.geolocation) { 
    var showPosition = function(position) { 
     updateByGeo(position.coords.latitude, position.coords.longitude); 
    }; 
    navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
    var zip = window.prompt("Unable to find your location. What is your zip code?"); 
    updateByZip(zip); 
    } 
}; 

--AND--

function updateByGeo(lat, lon) { 
    var url = "http://api.openweathermap.org/data/2.5/weather?" + "lat=" + lat + "&lon=" + lon + "&APPID=" + APPID; 

    sendRequest(url); 
} 

我试着使用CodePen在Chrome和苹果浏览器。我在这个项目中遇到了更多使用Chrome的问题，所以真的可以使用一些帮助让它在Safari上运行。

我真的很感谢帮助。谢谢！

Answer 1

尝试相同的链接，但使用HTTPS ...！

https://codepen.io/GeorgeMort/pen/LWpXPZ

此API仅适用于安全网站。