PinePhone prakticky/Test navigace

Z Wikiknih
Skočit na navigaci Skočit na vyhledávání

Kód HTML stránky pro JavaScriptový test satelitní navigace pomocí getCurrentPosition

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=">
  <title>Trasa</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Lato", sans-serif;
    }
    button {font-size: 25px;}
    #clock {
      height: 90vh;
      width: 100%;
      background-color: #14080e;
      color: #e9eb9e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
    }
  </style>
  <script>

    function clock() {
      document.getElementById("clock").innerText = "START";
    }
    
    function prepis() {
      document.getElementById("clock").innerText = "STOP";
    }
    
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);

  let currentDate = new Date();
  document.getElementById("clock").innerText = `${crd.latitude} ${crd.longitude}\n${crd.accuracy}\n\n ${currentDate.getMinutes()}:${currentDate.getSeconds()}`;
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
  document.getElementById("clock").innerText = `ERROR(${err.code}): ${err.message}`;
}

function loc() {
  navigator.geolocation.getCurrentPosition(success, error, options);
}

function loc2() {
  enableHighAccuracy = false;
  navigator.geolocation.getCurrentPosition(success, error, options);
  enableHighAccuracy = true;
}

  </script>
</head>

<body>
  <button onclick="clock()">start</button> <button onclick="prepis();">stop</button> <button onclick="loc()">loc</button> <button onclick="loc2()">loc noHigh</button>
  <div id="clock">
  </div>

</body>

</html>