Question

我正在尝试获取地理位置数据，然后将该数据合并到$ ajax调用URL中。但是会发生的是，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才能返回呢？所以，我的问题是，当地理定位代码完成执行时，是否有一个更优雅的解决方案来进行$ ajax调用？

Answer 1

将调用移至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

Answer 2

在ajax

中呼叫您的navigator.geolocation.getCurrentPosition功能

＆＃13;

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();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

但您会在Google Chrome中看到错误

getCurrentPosition（）和watchPosition（）不再适用于不安全起源。要使用此功能，您应该考虑切换您的应用程序到安全源，例如HTTPS

您可以在此处查看Google Insecure origins

在某些代码完成执行后延迟$ ajax调用

2 个答案: