json - Geolocation API と AJAX リクエスト

Question

私は、W3C Geolocation API を使用してユーザーの場所を取得し、Wunderground の API を使用して AJAX リクエストを作成してその場所の天気予報を読み込む個人的なプロジェクトに取り組んでいます。プロセスは次のとおりです。

ユーザーがページをロードします。
ページが読み込まれると、ブラウザはユーザーに現在地を共有するように求めます。
Geolocation が利用可能な場合、座標を決定し、それらを 2 つの変数に格納します。そうでない場合は、7 番目のステップにジャンプします。
これらの変数 (座標) は、完全な URL を形成する別の変数 (urlpath と呼ばれる) 内で混合されます。
Wunderground の JSON API に対して AJAX リクエストを行います。そのリクエスト URL には変数「urlpath」が含まれます。
受け取った JSON を解析し、結果をユーザーに表示します。これで完了です。
地理位置情報が利用できないか、ブラウザでサポートされていないため、「urlpath」変数の値を独自の Wunderground の地理位置情報に変更し、AJAX リクエストを作成して JSON を解析し、データをユーザーに表示します。

問題は、「urlpath」変数が座標で構成される前に行われた AJAX 要求です。次のファイルをダウンロードします。

http://api.wunderground.com/api/a701d0d2314662c6/undefined.json

これの代わりに：

http://api.wunderground.com/api/a701d0d2314662c6/geolookup/q/37.776289,-122.395234.json

助けてください。私はこれにちょっと初心者ですが、あなたの助けに感謝します。どうもありがとう。

これはコードです：

<!DOCTYPE html>
<html>
    <head>
        <title>Weather</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" type="text/javascript"></script>
    </head>
<body>
    <div id="container">
        <div class="sliceinfo" id="weather">
            <span class="ttitle">The weather</span>
            <div id="weathercnt">
                <p id="wlocation" class="sliceheadr">Loading location...</p>
                <p id="wconsulted">Loading data...</p>
                <img id="imgforecast" src="images/loading.gif" class="sliceimg" alt="Some icon">
                <div id="detailw">
                    <p id="tempw"></p>
                    <p id="windw"></p>
                    <p id="humidw"></p>
                </div>
            </div>
        </div>
    </div> 
<script type="text/javascript">
jQuery(document).ready(function($) {
            var KEY = "a701d0d2314662c6";
            var urlpath, wlat, wlong;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(getLocation);
            }
            else {
            urlpath = "geolookup/q/autoip.json";
            }
            function getLocation(position) {
                wlat = position.coords.latitude;
                wlong = position.coords.longitude;
                urlpath = "geolookup/q/" + wlat + "," + wlong ;
            }
            if (KEY != "a701d0d2314662c6")
            {
                $.ajax({
                    url: "http://api.wunderground.com/api/" + KEY + "/" + urlpath + ".json",
                    async: false,
                    dataType: "jsonp",
                    timeout: 4000,
                    success: function(parsed_json) {
                        var localw = parsed_json['current_observation']['display_location']['full'].toString();
                        var temp_c = parsed_json['current_observation']['temp_c'].toString();
                        var winds = parsed_json['current_observation']['wind_kph'].toString();
                        var humidw = parsed_json['current_observation']['relative_humidity'].toString();
                        var iconw = parsed_json['current_observation']['icon'].toString();
                        var consultw = parsed_json['current_observation']['observation_time'].toString();

                        $('#wlocation').html(localw);
                        $('#imgforecast').attr('src', "images/icons/" + iconw + ".png");
                        $('#tempw').html("<strong>Temperature:</strong> " + temp_c.replace(".",",") + " <sup>º C</sup>");
                        $('#humidw').html("<strong>Humidity:</strong> " + humidw);
                        $('#windw').html("<strong>Wind:</strong> " + winds + " Km/h");
                        $('#wconsulted').html(consultw.replace("Last Updated on","<strong>Updated on: </strong>"));
                        $('#wlocation').css("font-weight","bold");
            },
            error: function(request, status, err) {
                if (status == "timeout") {
                    $('#wlocation').html("ERROR");
                    $('#consultado').html("We were not able to load the information");
                    $('#imgforecast').attr('src', "http://t3.gstatic.com/images?q=tbn:ANd9GcQzl8g-SPI029d0EUZqW_oFPS8HqQ1yVMTBRZcLzulc51WIEIPn");
                } else {
                     $('#wlocation').html("Error: " + request + status + err);
                }
            }
        });
    }
    else
        alert("Fatal error");
});
</script>
</body>
</html>

json - Geolocation API と AJAX リクエスト

1 に答える 1

Related

Reference