HTML5 Game - A Basic Query of the Geolocation API

  1. HOME
  2. HTML5 Game
  3. Geolocation
  4. Geolocation

Description

A Basic Query of the Geolocation API

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
    </head> 
    <body> 
      <h1>Geolocation Example</h1> 
      <div id="locationValues"> 
      </div> 
      <div id="error"> 
      </div> 
      <script> 
/** /*ww  w .  j a v a  2s .c  o  m*/
 * The success callback function for getCurrentPosition. 
 * @param {Position} position The position object returned by the geolocation 
 *     services.  
 */ 
function successCallback(position) { 
  console.log('success') 
  // Get a reference to the div we're going to be manipulating. 
  let locationValues = document.getElementById('locationValues'); 
  
  // Create a new unordered list that we can append new items to as we enumerate 
  // the coords object. 
  let myUl = document.createElement('ul'); 
  
  // Enumerate the properties on the position.coords object, and create a list 
  // item for each one. Append the list item to our unordered list. 
  for (let geoValue in position.coords) { 
    let newItem = document.createElement('li'); 
    newItem.innerHTML = geoValue + ' : ' + position.coords[geoValue]; 
    myUl.appendChild(newItem); 
  } 
  
  // Add the timestamp. 
  newItem = document.createElement('li'); 
  newItem.innerHTML = 'timestamp : ' + position.timestamp; 
  myUl.appendChild(newItem); 
  
  // Enumeration complete. Append myUl to the DOM. 
  locationValues.appendChild(myUl); 
} 
  
/** 
 * The error callback function for getCurrentPosition. 
 * @param {PositionError} error The position error object returned by the 
 *     geolocation services. 
 */ 
function errorCallback(error) { 
  let myError = document.getElementById('error'); 
  let myParagraph = document.createElement('p'); 
  myParagraph.innerHTML = 'Error code ' + error.code + '\n' + error.message; 
  myError.appendChild(myParagraph); 
} 
  
// Call the geolocation services. 
navigator.geolocation.getCurrentPosition(successCallback, errorCallback); 
      </script> 
    </body> 
</html>

Related Topic