为什么Index.html可以在我的桌面上工作,但不能用作GitHub网页?

时间:2017-08-20 23:17:32

标签: html api geolocation github-pages

当我将index.html下面保存到我的桌面并打开文件时,它在我的浏览器上正常工作。但是当我在GitHub上创建一个存储库并将其作为网页发布时,只能正确加载纬度和经度值,而位置和温度值根本不会加载。有没有人知道为什么会发生这种情况?

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Geocode  Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>


<body>
<script>
$(document).ready(function() {
    var lat, lon, api_url;

    $.ajax({
          type : 'POST',
          data: '',
          url: "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyCW0lvagDP67ulkwwP7yAIBHJoj2HT0apM",

      success: function(result){
        lat = result['location']['lat'];
        $('#lat').html(lat);
        lon = result['location']['lng'];
                $('#lng').html(lon);

        api_url = 'http://api.openweathermap.org/data/2.5/weather?lat=' +
        lat + '&lon=' +
        lon + '&units=metric&appid=6b897716ef0e040e1f6c854adfb11822';

        $.ajax({
          url : api_url,
          method : 'GET',
          success : function (data) {
            var temprC = data.main.temp;
            var location = data.name;
            var desc = data.weather.description;
            $('#result').text(location);
            var temprF = (temprC * (9/5) + 32);
            $('#temp').text(temprF + '° F');
          }
        });
       }
    });
});
</script>
<span>Your Latitude : </span><span id="lat"></span><br>
<span>Your Longitude : </span><span id="lng"></span><br>
<span>Your Location:  </span><span id="result"></span><br>
<span>The Temp: </span><span id="temp"></span><br>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

我认为因为GitHub页面是使用HTTPS服务的。如果您尝试在HTTPS站点上发送HTTP请求,则可能会阻止该请求。

这样您就可以通过https://www.googleapis.com/geolocation/v1/geolocate获得纬度和经度,但无法通过http://api.openweathermap.org/data/2.5/weather获取数据。

来自GitHub的

This Article可以帮到你。