检查地理位置后的功能未启动

Question

我正在构建一个小型 Web 应用程序，它采用表单输入（名称）+ 用户的地理位置并将其放入本地存储数组中。我是 JS 的新手，但我已经完成了负责名称的部分。我现在正试图将它扩展到在用户按下提交时将纬度 + 经度存储在本地存储数组中的点，但不知何故，执行此操作的函数不会启动/设置。

window.onload = function() {

// Read value from storage, or empty array
var names = JSON.parse(localStorage.getItem('locname') || "[]");
var lat = JSON.parse(localStorage.getItem('latitude') || "[]");
var long = JSON.parse(localStorage.getItem('longitude') || "[]");

function initCoords() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(saveData);
    console.log('This works');
  } else {
    showError("Your browser does not support Geolocation!");
  }
}

function saveData(data){
  console.log('But does it get here?');
  //Push Users Input value
  var data = document.getElementById("locationName").value;
  names.push(data);
  localStorage.setItem('locname', JSON.stringify(names));

  //Push Latitude
  var latitude = position.coords.latitude;
  lat.push(latitude);
  localStorage.setItem('latitude', JSON.stringify(latitude));

  //Push Longitude
  var longitude = position.coords.longitude;
  long.push(longitude);
  localStorage.setItem('longitude', JSON.stringify(longitude));
  }

document.querySelector('#saveData').onclick = initCoords;
} 

我有一个 ID 为 saveData 的按钮。我没有地理定位的这个脚本的早期版本运行良好，在那里我通过单击按钮启动了 saveData 功能。在这种情况下，我首先想检查用户是否有可用的地理位置，因此我创建了 initCoords 函数。

我尝试使用控制台日志来查看我的函数在哪里结束，它以某种方式没有到达 saveData 中的“但它到达这里”。

Answer 1

我认为你的问题是这样的

我有一个 ID 为 saveData 的按钮

你还有一个同名的函数

function saveData(data){ ....

如果函数在全局范围内，它将被设置为window.saveData，然后当具有该ID的元素出现在函数之后时，浏览器将元素作为ID存储在window对象上，因此它存储window.saveData 作为元素并覆盖函数。

解决方案是更改函数名称或元素 ID。

编辑：

这里还有一些问题：

你没有在任何地方声明position，你有data作为回调的参数

function saveData(data){
  var data = document.getElementById("locationName").value;
  ....

这没有任何意义，你可能是说

function saveData(position){
  var data = document.getElementById("locationName").value;
  ....

事实上，您将位置对象中的数字存储在 localStorage 中，而不是数组：

var latitude = position.coords.latitude;
  lat.push(latitude);
  localStorage.setItem('latitude', JSON.stringify(latitude));

查看您如何将数据推送到纬度，但您保存的是纬度，数字，而不是数组，所以下次您尝试推送到数字而不是数组时会出现错误，应该是

var latitude = position.coords.latitude;
  lat.push(latitude);
  localStorage.setItem('latitude', JSON.stringify(lat));

但是现在您已经将数字存储在 localStorage 中，所以在您在脚本中走这么远之前您会收到一个错误，您还必须清除您的 localStorage，它可以在浏览器控制台中完成或类似这个

localStorage.removeItem('locname');
localStorage.removeItem('latitude');
localStorage.removeItem('longitude');

在你开始尝试工作代码之前，你必须清除它一次，它应该看起来像这样

window.onload = function () {

    localStorage.removeItem('locname');
    localStorage.removeItem('latitude');
    localStorage.removeItem('longitude');

    // Read value from storage, or empty array
    var names = JSON.parse(localStorage.getItem('locname') || "[]");
    var lat   = JSON.parse(localStorage.getItem('latitude') || "[]");
    var long  = JSON.parse(localStorage.getItem('longitude') || "[]");

    function initCoords() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(saveData);
            console.log('This works');
        } else {
            showError("Your browser does not support Geolocation!");
        }
    }

    function saveData(position) {
        var data = document.getElementById("locationName").value;
        names.push(data);
        localStorage.setItem('locname', JSON.stringify(names));

        var latitude = position.coords.latitude;
        lat.push(latitude);
        localStorage.setItem('latitude', JSON.stringify(lat));

        var longitude = position.coords.longitude;
        long.push(longitude);
        localStorage.setItem('longitude', JSON.stringify(long));

    }

    document.getElementById('saveData').onclick = initCoords;
}