2017-01-26 3 views
2

Я пытаюсь получить данные геолокации, а затем включить эти данные в URL-адрес вызова $ ajax. Но происходит то, что вызовы console.log (lat/lon) возвращают начальное значение (0). Это означает, что геолокация вызов слишком поздно, чтобы вернуться и $ Ajax звонки просто сделаны со значениями по умолчанию, как в: http://api.openweathermap.org/data/2.5/weather?lat=0&lon=0&appid=9011468f93d0dac073b28cda9e83cd01 "

var lat = 0; 
var lon = 0; 

console.log(lat); 
console.log(lon); 

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(pos){ 
    lat = pos.coords.latitude; 
    lon = pos.coords.longitude; 
    }) 
} 

function getWeatherData() { 
    console.log(lat); 
    console.log(lon); 
    setTimeout(function(){ 
    $.ajax({ 
    url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=9011468f93d0dac073b28cda9e83cd01", 
    success: function (data) { 
     console.log(data); 

    }, 
    error: function() { 
     console.log("REKT"); 
    } 
    }) 
}, 1000); 
} 

$(document).ready(function() { 
    getWeatherData(); 
    }); 

Я решил, добавив произвольную функцию тайм-аута на Ajax вызова $, но что, если вызов занимает больше, чем 1000 или 10000ms вернуться? Итак, мой вопрос будет есть более элегантное решение, чтобы сделать $ АЯКС вызов только тогда, когда геолокация код завершения выполнения?

ответ

3

Подведите вызова функции обратного вызова из getCurrentPosition

значения

Добавлено: он не вызывает getWeatherData, если геолокация не существует. Прямо сейчас вы всегда называют его

$(function() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(pos){ 
    lat = pos.coords.latitude; 
    lon = pos.coords.longitude; 
    getWeatherData(); 
    }); 
    } 
}); 

Кроме этого: https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only

+0

Я выбрал это как ответ, просто потому, что он был более модульным решением. Я пробовал написать код, чтобы более внимательно изучить поток данных: http://pastebin.com/1w2fiXz8 Итак, хотя «Инициализация ...» срабатывает сначала «Успех!». регистрируется только после «Запуск getWeatherData». Я немного новичок в кодировании, но в соответствии с этим: вызывается функция обратного вызова, и до тех пор, пока она не вернется (отсюда и название), будет продолжен другой код. «Успех!» выполняется только при возврате функции? В заключение, функции обратного вызова являются асинхронными по своей природе? – Anon

+0

Это заключение асинхронного вызова. – mplungjan

1

Позвоните своему ajax функцию в navigator.geolocation.getCurrentPosition

var lat = 0; 
 
var lon = 0; 
 

 
function getWeatherData(){ 
 

 
    if (navigator.geolocation) { 
 

 
    navigator.geolocation.getCurrentPosition(function(pos){ 
 
     lat = pos.coords.latitude; 
 
     lon = pos.coords.longitude; 
 
    
 
     $.ajax({ 
 
      url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon +  "&appid=9011468f93d0dac073b28cda9e83cd01", 
 
      success: function (data) { 
 
      console.log(data); 
 
      }, 
 
      error: function() { 
 
      console.log("REKT"); 
 
      } 
 
     }); 
 
    }); 
 
    } 
 
} 
 
              
 

 
$(document).ready(function() { 
 
    getWeatherData(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

но вы увидите сообщение об ошибке в Google Chrome

getCurrentPosition() и watchPosition() больше не работать на небезопасных происхождения. Для того, чтобы использовать эту функцию, вы должны рассмотреть вопрос о переходе вашего приложение для безопасного происхождения, такие как HTTPS

Вы можете увидеть здесь Google Insecure origins

Смежные вопросы