我想创建本地天气应用程序它可以在本地服务器上完美运行，但不能在线运行答案

【问题标题】：I want to create local weather App it works perfectly on local server but does not work online我想创建本地天气应用程序它可以在本地服务器上完美运行，但不能在线运行
【发布时间】：2016-12-01 07:28:50
【问题描述】：

这是我的应用程序 JavaScript 代码

var APPID = "fa89e6e41d40d7766082a8eb31cb25bb";
var temp;
var loc;
var icon;
var humidity;
var wind;
var direction;

function update(weather) {
    icon.src = "imgs/codes/" + weather.code + ".png"
    humidity.innerHTML = weather.humidity;
    wind.innerHtml = weather.wind;
    direction.innerHTML = weather.direction;
    loc.innerHTML = weather.location;
    temp.innerHTML = weather.temp;
}

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

    /* NEW */
    if(navigator.geolocation){
    var showPosition = function(position){
        updateByGeo(position.coords.latitude, position.coords.longitude);
    }
    navigator.geolocation.getCurrentPosition(showPosition);
    } else {
    var zip = window.prompt("Could not discover your location. What is your zip code?");
    updateByZip(zip);
    }

}

/* NEW */

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


function updateByZip(zip){
    var url = "http://api.openweathermap.org/data/2.5/weather?" +
    "zip=" + zip +
    "&APPID=" + APPID;
    sendRequest(url);
}


function sendRequest(url){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var data = JSON.parse(xmlhttp.responseText);
        var weather = {};
        weather.code = data.weather[0].id;
        weather.humidity = data.main.humidity;
        weather.wind = data.wind.speed;
        /* NEW */
        weather.direction = degreesToDirection(data.wind.deg)
        weather.location = data.name;
        /* NEW */
        weather.temp = K2F(data.main.temp);     
        update(weather);
    }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();    
}

function degreesToDirection(degrees){
    var range = 360/16;
    var low = 360 - range/2;
    var high = (low + range) % 360;
    var angles = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"];
    for( i in angles ) {
    if(degrees >= low && degrees < high){
        console.log(angles[i]);
        return angles[i];
        console.log("derp");
    }
    low = (low + range) % 360;
    high = (high + range) % 360;
    }
    return "N";

}

function K2F(k){
    return Math.round(k*(9/5)-459.67);
}

function K2C(k){
    return Math.round(k - 273.15);
}

HTML 代码

<html>
  <head>
    <title>Weather App</title>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body>


 Temprature: <span id="temperature">0</span>&deg; <br> 
 Location: <span id="location">Unknown</span><br>


        humidity: <span id="humidity">0</span>% <br>


        Wind: <span id="wind">0</span> mph <span id="direction">N</span>

  </body>
</html>

【问题讨论】：

它到底是怎么不起作用的？控制台中是否有错误消息？会发生什么？
在本地服务器上它会显示警报以了解您的位置，但在网上它显示注意或 html 标记获取值。

标签： javascript html geolocation openweathermap

【解决方案1】：

虽然您的问题没有说明您使用的是 HTTP 还是 HTTPS，但我相信我已经知道这个问题。您的网络服务器需要启用 HTTPS 配置才能使某些地理定位功能正常工作。

我建议按照@samgak 的建议查看您的浏览器控制台是否有错误。您可能会收到一条错误消息，指出 getCurrentPosition() 在不安全的来源上已被弃用。如果是这种情况，请参阅Deprecating Powerful Features on Insecure Origins 了解更多信息。

【讨论】：

能否请您复制此代码并在控制台中检查是否有错误。我们的服务器已启用 http
正如我之前所说，“您的网络服务器需要配置 HTTPS”。你刚才说的是 HTTP。这还不足以让地理定位 API 正常工作。