basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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>