Gps Kilometerzähler
Beim Start der Seite wird die Position gespeichert und zeigt dir dann die zurückgelegte Stecke an
Der hier verwendete 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>