我想創建本地天氣應用，它可以在本地服務器上完美運行，但不能在線運行

Question

這是我的應用程序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>

Answer 1

盡管您的問題並未說明您使用的是HTTP還是HTTPS，但我相信我已經知道了這個問題。 您的網絡服務器需要配置為啟用HTTPS，以便某些地理定位功能正常工作。

我建議按照@samgak的建議在瀏覽器控制台中查找錯誤。 您可能會收到一條錯誤消息，指出不安全的來源不建議使用getCurrentPosition() 。 如果是這種情況，請參閱在不安全來源上棄用強大的功能以獲取更多信息。

我想創建本地天氣應用，它可以在本地服務器上完美運行，但不能在線運行

問題描述

1 個解決方案

解決方案1
0 2016-12-01 08:04:32

我想創建本地天氣應用，它可以在本地服務器上完美運行，但不能在線運行

問題描述

1 個解決方案

解決方案1 0 2016-12-01 08:04:32

解決方案1
0 2016-12-01 08:04:32