ユーザーがアクセスを許可した後にブラウザGeoLocationを使用する方法

Question

geoLocationに基づいてJSONを返すweather API呼び出しに問題があります。ブラウザは、質問に場所へのアクセスの許可/拒否を依頼し、API呼び出しを、ページロード時に実行したいとします。代わりにボタンクリックの後ろにコールを入れましたが、それでも地元の天気のページは更新されません。しかし、デバッガを使用してコードをステップ実行すれば、正しく動作します。

Javascriptを：

$(document).ready(function() { 
    var curLatitude = 'x'; 
    var curLongditude = 'y'; 
    var weatherApi = 'http://api.openweathermap.org/data/2.5/weather?q=London,GB&APPID=[insert-registered-api-key]'; 

// check for Geolocation support 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      curLatitude = position.coords.latitude; 
      curLongditude = position.coords.longitude; 
       if (curLatitude !== 'x' && curLongditude !== 'y') { 
        weatherApi = 'http://api.openweathermap.org/data/2.5/weather?lat=' + curLatitude + 
             '&lon=' + curLongditude + '&APPID=[insert-registered-api-key]'; 

       }; 
      loadWeather(weatherApi); 
      }, function() {      
       console.log('FAILED'); 
       }); 
    } else { 
      console.log('No geoLoc'); 
      // no geo location support - just load London weather 
      loadWeather(weatherApi); 
    }; 


    $('#btnLocal').click(function() { 
     $(".message").html('clicked'); 
     loadWeather(weatherApi); 
    }); 

    function loadWeather(weatherApiUri) { 


     var current = ""; 
     var ok; 


     var ret = $.getJSON(weatherApiUri, function(jsonres) { 
      console.log("JSON Data: loaded"); 
      current = 'called api'; 
      console.log(current);    

      $(".message").html(current); 
     }).done(function() { 
      console.log("done"); 
      }).fail(function() { 
      console.log("error"); 
      }).always(function() { 
      console.log("complete"); 
      }); 




      var weatherReturned = {id:0 , main:"weather", description:"weather detail", icon:"code" }; 
      weatherReturned = ret.responseJSON.weather; 
      $(".message").html(ret.responseJSON.name + ', ' + weatherReturned[0].description); 

    }; 

}); 

JSON応答：あなたは何ができるか

{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":500,"main":"Rain","description":"light rain","icon" 
:"10d"}],"base":"cmc stations","main":{"temp":290.673,"pressure":1009.48,"humidity":83,"temp_min":290 
.673,"temp_max":290.673,"sea_level":1019.21,"grnd_level":1009.48},"wind":{"speed":4.3,"deg":93.0027} 
,"rain":{"3h":0.1375},"clouds":{"all":92},"dt":1462884891,"sys":{"message":0.0043,"country":"GB","sunrise" 
:1462853704,"sunset":1462909185},"id":2643743,"name":"London","cod":200} 

Answer 1

コールのsetInterval機能とタイマーを設定することです。

タイマー機能では、navigator.geolocationチェック・パスの後に設定するフラグをチェックできます。

インターバル機能でのみロジックを配置します。

不要な呼び出しを避けるため、タイマーをクリアすることを忘れないでください。

コードは次のようになります

あなたはこのnavigator.geolocation.getCurrentPosition（機能（位置）{/ *成功* /}、機能（）{のように、getCurrentPostionでタイムアウトオプションを提供したらどう

var timer = setInterval(function(){ 
    if(geoReady){ 
     // clear interval 
     window.clearInterval(timer); 

     // do your logic 
    }, 300 
} 

if (navigator.geolocation) { 
    geoReady = true; 
} 
else { 
    // clear interval 
     window.clearInterval(timer); 

}