如何使用jQuery将数组元素添加到html

Question

我使用浏览器的内置导航器创建了一个包含两个元素的数组。 gpsLocation[0] 是我的纬度，gpsLocation1 是我的经度。在我的 jQuery 代码之前，使用日志检查我的 gpsLocation，我确认这两个值都存在。然而，当我将数组的第一个元素分配给段落元素的 html 时，它显示未定义。我什至检查了它给我的坐标，它们非常准确。我已经搜索了答案，并且有一百万个类似措辞的问题，但似乎没有一个人试图这样做。

这是我的代码：

function getLocation() {
  var gpsLocation = [];
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      gpsLocation.push(position.coords.latitude);
      gpsLocation.push(position.coords.longitude);
    });
  }
  return gpsLocation;
}

function getWeather() {   
  var gpsLocation = getLocation();
  console.log(gpsLocation);//Looks good in the console.
  $(function(){
    $('#test-paragraph').html('Latitude: ' + gpsLocation[0]);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather">
  <button id="test-button" onclick="getWeather()">Test Button</button>
  <p id="test-paragraph">This is a sample paragraph for learning jQuery</p>
</div>

第二个函数名称可能看起来很随意，但天气最终将是它的目的。仍然在努力理解 jQuery 和 json。

My console

Answer 1

function getLocation() {
    var gpsLocation = [];
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
                latitude: "a",
                longitude: "v"
            };
            gpsLocation.push(pos);
        });
    }
    return gpsLocation;
}

function getWeather() {
    var gpsLocation = getLocation();
    console.log(gpsLocation); //Looks good in the console.
    $(function() {
        $('#test-paragraph').html('Latitude: ' + gpsLocation[0]);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather">
    <button id="test-button" onclick="getWeather()">Test Button</button>
    <p id="test-paragraph">This is a sample paragraph for learning jQuery</p>
</div>

Answer 2

您没有执行 navigator.geolocation.getCurrentPosition(function(position) 函数，这意味着 var gpsLocation 保持为空数组。运行我的编辑并查看日志“现在在此处”永远不会触发。首先查看该问题。

function getLocation() {
    var gpsLocation = [];
    if (navigator.geolocation) {
console.log('in here');
        navigator.geolocation.getCurrentPosition(function(position) {
console.log('now in here');
            var pos = [{
                latitude: "a",
                longitude: "v"
            }];
            gpsLocation.push(pos);
            console.log('do i get this far?');
        });
    }
    return gpsLocation;
}

function getWeather() {
    var gpsLocation = getLocation();
    console.log(gpsLocation); //Looks good in the console.
    $(function() {
        $('#test-paragraph').html('Latitude: ' + gpsLocation[0]);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather">
    <button id="test-button" onclick="getWeather()">Test Button</button>
    <p id="test-paragraph">This is a sample paragraph for learning jQuery</p>
</div>