basti1012.bplaced.net

Beim Start der Seite wird die Position gespeichert und zeigt dir dann die zurückgelegte Stecke an

Code

                                    
                                
<div id="tripmeter">
  <p>
    Starting Location (lat, lon):<br>
    <span id="startLat">???</span>°, <span id="startLon">???</span>°
  </p>
  <p>
    Current Location (lat, lon):<br>
    <span id="currentLat">???</span>°, <span id="currentLon">???</span>°
  </p>
  <p>
    Distance from starting location:<br>
    <span id="distance">0</span> km
  </p>
</div>

	<style>
		#status {
			width: 50vw; min-width: 500px;
			margin-top: 20px;
		}
		#status h2 {margin-top: 0px;}
		#status p {padding-left: 20px;}
		[data-status="off"] ~ #status {
			border: 2px solid red;
		}
		[data-status="on"] ~ #status {
			border: 2px solid green;
		}
	</style>


	<header>
		<h1>Wake Lock Demo</h1>
	</header>

	<p>The button below changes depending on whether wake lock is active or not.</p>

	<button data-status="off">Turn Wake Lock ON</button>

	<section id="status">
		<h2>Wake Lock Status</h2>
		<p></p>
	</section>
	
	<p>Wake lock will automatically release if if the tab becomes inactive.</p>
	<p>To re-activate the wake lock automatically when the tab becomes active again, check this box: <input type="checkbox" id="reaquire" /></p>


<script>

    


console.clear();

// status paragraph
const statusElem = document.querySelector('#status p');
// toggle button
const wakeButton = document.querySelector('[data-status]');
// checkbox
const reaquireCheck = document.querySelector('#reaquire');

// change button and status if wakelock becomes aquired or is released
const changeUI = (status = 'acquired') => {
  const acquired = status === 'acquired' ? true : false;
  wakeButton.dataset.status = acquired ? 'on' : 'off';
  wakeButton.textContent = `Turn Wake Lock ${acquired ? 'OFF' : 'ON'}`;
  statusElem.textContent = `Wake Lock ${acquired ? 'is active!' : 'has been released.'}`;
}

// test support
let isSupported = false;

if ('wakeLock' in navigator) {
  isSupported = true;
  statusElem.textContent = 'Screen Wake Lock API supported ????';
} else {
  wakeButton.disabled = true;
  statusElem.textContent = 'Wake lock is not supported by this browser.';
}

if (isSupported) {
  // create a reference for the wake lock
  let wakeLock = null;

  // create an async function to request a wake lock
  const requestWakeLock = async () => {
    try {
      wakeLock = await navigator.wakeLock.request('screen');

      // change up our interface to reflect wake lock active
      changeUI();

      // listen for our release event
      wakeLock.onrelease = function(ev) {
        console.log(ev);
      }
      wakeLock.addEventListener('release', () => {
        // if wake lock is released alter the button accordingly
        changeUI('released');
      });

    } catch (err) {
      // if wake lock request fails - usually system related, such as battery
      wakeButton.dataset.status = 'off';
      wakeButton.textContent = 'Turn Wake Lock ON';
      statusElem.textContent = `${err.name}, ${err.message}`;

    }
  } // requestWakeLock()

  // if we click our button
  wakeButton.addEventListener('click', () => {







if(navigator.geolocation){ 

  
  
    var startPos;
  navigator.geolocation.getCurrentPosition(function(position) {
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
    
    
    
    
    navigator.geolocation.watchPosition(function(position) {
  document.getElementById('currentLat').innerHTML = position.coords.latitude;
  document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

navigator.geolocation.watchPosition(function(position) {

 // setInterval(function(){
  document.getElementById('distance').innerHTML =
      calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                        position.coords.latitude, position.coords.longitude);
                        console.log(calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                        position.coords.latitude, position.coords.longitude));
 // },1000);
});

function calculateDistance(lat1, lon1, lat2, lon2) {
  var R = 6371; // km
  var dLat = (lat2 - lat1).toRad();
  var dLon = (lon2 - lon1).toRad(); 
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
          Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
          Math.sin(dLon / 2) * Math.sin(dLon / 2); 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); 
  var d = R * c;
  return d;
}
Number.prototype.toRad = function() {
  return this * Math.PI / 180;
}    
    
    
    
    
    
    
    
    
    
    
    
  }, function(error) {
    alert('Error occurred. Error code: ' + error.code);
  });
  
  
}else{ 
  console.log('Geolocation wird für diese Browser / OS-Version noch nichtunterstützt.'); 
}

























    // if wakelock is off request it
    if (wakeButton.dataset.status === 'off') {
      requestWakeLock()
    } else { // if it's on release it
      wakeLock.release()
        .then(() => {
          wakeLock = null;
        })
    }
  })

  const handleVisibilityChange = () => {
    if (wakeLock !== null && document.visibilityState === 'visible') {
      requestWakeLock();
    }
  }

  reaquireCheck.addEventListener('change', () => {
    if (reaquireCheck.checked) {
      document.addEventListener('visibilitychange', handleVisibilityChange);
    } else {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    }
  });

} // isSupported



</script>