将地理位置保存到数组值 returns [object, Object]

Question

我一直在寻找解决这个问题的方法，但就是找不到。

我正在编写一个代码，将数据作为 jSon 保存到浏览器的本地存储中。代码工作正常，但我应该为每个保存的数据添加地理定位。我可以获得坐标显示在 div 中，但我无法将相同的数据保存到 jSon -file.

代码如下：

$(document).ready(function(){
  var selected_index = -1;
  var theArray = []; 
  var operation = "A"; 
  if(localStorage.getItem("ID") != null) { 

}
//***********************************************************************

  $("#saveButton").click(function(){
      if(operation == "A" && $("#input1").val() != ""){ 

    //Now trying to get the geolocation

    var x = document.getElementById("DivId"); //works when targeted to a div
    alert(x);                                 //This returns [object 
                                                HTMLDivElement]

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      x = "Geolocation is not supported by this browser.";
      }
    }
    function showPosition(position) {
    x = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
    }


  getLocation();

       var object = {
              value1 : $("#input1").val(),
              value2 : $("#input2").val(),
              value3 : $("#input3").val(),
              value4 : $("#input4").val(),
              value5 : $("#input5").val(),
              time : Date(),
              place: x          //This is where the location is saved
                                //but returns [object, Object]


          }

          theArray.push(object); 
          localStorage.setItem("ID",JSON.stringify(TheArray));
      }
      console.log(x); //for testing, returns: <div id="DivID" 
                        style="display: none;"></div>

      $("#input1").val("");
      $("#input2").val("");
      $("#input3").val("");
      $("#input4").val("");
      $("#input5").val("");

      $("#input1").focus();

  });

很明显，我试图以错误的形式保存位置数据，但如何正确完成？预先感谢您的帮助！！

Answer 1

您的问题与异步请求有关。

当您调用 getPosition() 时，您正在调用 getCurrentPosition(showPosition)。这里的问题是这个函数异步执行。调用它后，它在后台运行，您的代码会继续执行而不会延迟，因此当您定义 object 变量时， showPosition 尚未被调用，因此 x 包含初始值你给了它，这是一个 HTMLDivElement.

为避免这种情况，您应该在 showPosition 回调中定义 object 变量，并从那里保存它，因为您永远不知道该方法何时会被调用。对于初学者来说，用户必须允许页面获取他们当前的位置。用户可以拒绝或忽略它，在这种情况下，回调函数可能永远不会被调用。我的意思是，您可能知道是否存在错误（getCurrentPosition 接受错误回调），但您可能永远不会收到请求的答复。

此外，此代码还有其他问题，因为您将 x 分配给 DIV 元素，然后将其分配给字符串。我想你真的想将该字符串添加为 DIV 的子节点，所以你应该这样做：

x.appendChild(document.createTextNode('geolocalization is not supported in this browser'));

将地理位置保存到数组值 returns [object, Object]

Saving Geolocation to an array value returns [object, Object]

javascript

arrays

json

geolocation