使用 Java 脚本保存跟踪的 GPS 数据

Question

我写了一些代码来跟踪用户的 GPS 数据： index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <title>Document</title>
      <script type="text/javascript" src="tracking.js"></script> 
  </head>
  <body>

    <button class="btn btn-success m-5" onclick="getLocation()">start tracking</button>

    <button class="btn btn-danger m-5" onclick="endTrack()">end tracking</button>

  </body>
</html>

tracking.js:

var id;
var data = [];
var startTime;

function getLocation() {
    startTime = Date.now();

    if (navigator.geolocation) {
        id = navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var pos = {
        lat: position.coords.latitude,
        long: position.coords.longitude,
        time: Date.now() - startTime
    }

    data.push(pos);

    console.log("Latitude: " + position.coords.latitude +
    " Longitude: " + position.coords.longitude);
}

function endTrack() {
    console.log("tracking ended");
    navigator.geolocation.clearWatch(id);
}

function getData() {
    return data;
}

跟踪工作正常，但我还需要保存数据。最适合我的是数据是否保存在文件中，例如一个文本文件，但由于我使用的是 Java 脚本，我认为这是不可能的，因为它是客户端。我知道您可以使用 php 创建文件并写入文件，但我不知道如何结合 php 和 js 在单击时获取文件中数据 [] 中存储的数据结束跟踪按钮。我该怎么做？

编辑：我现在通过 ajax:

发送我的数据

function getData() {
    var send = JSON.stringify(data);
    console.log(send)
    jQuery.post('save.php', {'data': send}, function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    })
}

然后这样接收：

$data = $_POST['data'];
timestamp = date('Y-m-d_H-i-s');
$datei = fopen($timestamp.".txt","x");
fwrite($datei, $data, 100);
fclose($datei);

问题是如果我发送一个看起来像这样的字符串： [{"lat":80.08359300000001,"long":8.4771352,"time":2},{"lat":80.08359300000001,"long":8.4771352,"time": 2001}] 文本文件中仅打印 100 个字符，console.log(send) 显示所有字符以及 alert("Data: " + data + "\nStatus: " + status);显示所有数据，只有文本文件提供缩短版本。我使用 XAMPP。我还尝试在 php.ini 中增加 post_max_size 和 upload_max_size，但它也无济于事。为什么不显示所有字符？ post 是否有限制（我在其他 post 中环顾四周，他们都说没有）或者 php 有问题还是什么？顺便说一句：我没有收到任何错误，也许 php 代码中有错误，但我没有看到，因为它在另一个文件中。

Answer 1

如果您的应用程序很小并且您不介意它可以从客户端编辑和清除，请使用 HTML5 local storage 通过客户端保存数据。

但是，如果您需要它仅供特定用户使用，或者您想要更复杂的东西，您可以尝试使用 node.js 做后端，例如 PHP 用于编写服务器边代码，但它使用 javascript 这可能对您更有用。

希望这对您有所帮助。需要帮助请叫我。 :D

Answer 2

我发现了问题：在 php 文件中有字符数限制：

fwrite($datei, $data, 100);

我只需要更改“100”

使用 Java 脚本保存跟踪的 GPS 数据

Save tracked GPS Data with Java Script

javascript

php

gps

file