Question

我正在制作一支笔，它使用navigator.geolocation函数来获取用户的经度和纬度。这很好。

我的问题是当我调用getWeatherInfo()函数时。您将看到该函数中的第一行调用另一个函数getLocation()，然后在这种情况下引发alert - alert(location)。但是，我不明白为什么在调用getLocation()函数之前会发出警报，因为在var location = getLocation();之前调用了alert(location)函数？我相信是这种情况，因为有一个alert(lat + " " + lon);' in the getLocation（）函数，并且该警报出现在第二位。

所以，不知道那里发生了什么..这可能与我为什么没有将结果反馈到var location = getLocation();显示为未定义的原因有关???

Link to my pen

以下是代码：

HTML：

<div id="data">
</div>

<button onclick="getWeatherInfo()">Click Me</button>

CSS：

#data {
  width: 500px;
  height: 200px;
  margin: 0 auto;
  background: purple;
  color: white;
  text-align: center;
}

使用Javascript：

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var lat = (Math.round(position.coords.latitude)).toString();
      var lon = (Math.round(position.coords.longitude)).toString();
      alert(lat + " " + lon); 
      return [lat, lon];
    });
  } else {
    alert("You must allow geolocation to retrieve weather data for your area");
  }
}

function getWeatherInfo() {
  var location = getLocation();
  alert(location); 
  $("#data").html(location[0] + " " + location[1]);
}

请注意，jQuery已在此笔中启用并使用。

Answer 1

因为navigator.geolocation.getCurrentPosition是异步运行的，所以在调用alert(location)之后立即调用getLocation()而不是等待它解析。您必须使用Promise或回调来处理您收到的位置。

注意：您应该使用console.log进行调试。

编辑：请查看@ Rick的回答示例。

Answer 2

它似乎抓住了数据，但我看到你的意思是无序调用..尝试在功能中通过你的警报把这条线放好..

$("#data").html(location[0] + " " + location[1]);

这可能不是你想要如何安排你的代码，但它是......你必须设置这样的东西：

function getLocation(callback) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var lat = (Math.round(position.coords.latitude)).toString();
      var lon = (Math.round(position.coords.longitude)).toString();
      //alert(lat + " " + lon); 
      var coords = [lat, lon];
      callback(coords);
      //return coords;
    });
  } else {
    alert("You must allow geolocation to retrieve weather data for your area");
  }
}

function getWeatherInfo() {
    getLocation(function(location){
        //alert(location); 
        $("#data").html(location[0] + " " + location[1]);
    });
}

函数内的警报和函数调用无序发生

2 个答案: