API γεωγραφικής τοποθεσίας

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Εντοπίστε τη θέση του χρήστη

Το API γεωγραφικής τοποθεσίας HTML χρησιμοποιείται για τη λήψη της γεωγραφικής θέσης ενός χρήστη.

Δεδομένου ότι αυτό μπορεί να θέσει σε κίνδυνο το απόρρητο, η θέση δεν είναι διαθέσιμη εκτός εάν ο χρήστης την εγκρίνει.

Σημείωση

Ο γεωγραφικός εντοπισμός είναι πιο ακριβής για συσκευές με GPS, όπως smartphone.

Υποστήριξη προγράμματος περιήγησης

Το Geolocation API υποστηρίζεται σε όλα τα προγράμματα περιήγησης:

Yes Yes Yes Yes Yes

Σημείωση

Το API Geolocation θα λειτουργεί μόνο σε ασφαλή περιβάλλοντα όπως ως HTTPS.

Εάν ο ιστότοπός σας φιλοξενείται σε μη ασφαλή προέλευση (όπως HTTP), το Τα αιτήματα για τη λήψη της τοποθεσίας των χρηστών δεν θα λειτουργούν πλέον.

Χρήση του API Geolocation

Η μέθοδος getCurrentPosition() χρησιμοποιείται για την επιστροφή της θέσης του χρήστη.

Το παρακάτω παράδειγμα επιστρέφει το γεωγραφικό πλάτος και το μήκος της θέσης του χρήστη:

Παράδειγμα

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
  } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

 function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
 }
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

Παράδειγμα που εξηγείται:

  • Ελέγξτε αν υποστηρίζεται η γεωγραφική τοποθεσία

  • Εάν υποστηρίζεται, εκτελέστε τη μέθοδο getCurrentPosition(). Εάν όχι, εμφανίστε ένα μήνυμα στον χρήστη

  • Εάν η μέθοδος getCurrentPosition() είναι επιτυχής, επιστρέφει ένα αντικείμενο συντεταγμένων στη συνάρτηση που καθορίζεται στην παράμετρο (showPosition)

  • Η συνάρτηση showPosition() εξάγει το Latitude και Longitude

Το παραπάνω παράδειγμα είναι ένα πολύ βασικό σενάριο Geolocation, χωρίς χειρισμό σφαλμάτων.

Χειρισμός σφαλμάτων και απορρίψεων

Η δεύτερη παράμετρος της μεθόδου getCurrentPosition() χρησιμοποιείται για τον χειρισμό Σφάλματα. Καθορίζει μια συνάρτηση που θα εκτελεστεί εάν δεν καταφέρει να πάρει την τοποθεσία του χρήστη:

Παράδειγμα

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
        x.innerHTML = "User denied the request for Geolocation."
        break;
    case error.POSITION_UNAVAILABLE:
        x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
        x.innerHTML = "The request to get user location timed out."
        break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
    }
 }

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Εμφάνιση του αποτελέσματος σε χάρτη

Για να εμφανίσετε το αποτέλεσμα σε έναν χάρτη, χρειάζεστε πρόσβαση σε μια υπηρεσία χαρτών, όπως η Google Χάρτες.

Στο παρακάτω παράδειγμα, το επιστρεφόμενο γεωγραφικό πλάτος και μήκος χρησιμοποιείται για την εμφάνιση της τοποθεσίας σε ένα Google Χάρτης (χρησιμοποιώντας στατική εικόνα):

Παράδειγμα

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

   let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
   "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

   document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
 }

Δοκιμάστε το μόνοι σας

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Πώς να εμφανίσετε έναν διαδραστικό χάρτη Google με επιλογές δείκτη, ζουμ και σύρετε.

Σενάριο χάρτη Google

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let lat = position.coords.latitude;
  let lon = position.coords.longitude;
  const latlon = new google.maps.LatLng(lat, lon)
  const mapholder = document.getElementById('mapholder')
  mapholder.style.height = '250px';
  mapholder.style.width = '500px';

  var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  }
    
  const map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
  const marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Πληροφορίες για συγκεκριμένη τοποθεσία

Αυτή η σελίδα έχει δείξει πώς να εμφανίζεται η θέση ενός χρήστη σε έναν χάρτη.

Ο γεωγραφικός εντοπισμός είναι επίσης πολύ χρήσιμος για πληροφορίες συγκεκριμένης τοποθεσίας, όπως:

  • Ενημερωμένες τοπικές πληροφορίες

  • Εμφάνιση σημείων ενδιαφέροντος κοντά στο χρήστη

  • Πλοήγηση βήμα-βήμα (GPS)

Η μέθοδος getCurrentPosition() - Επιστροφή δεδομένων

Η μέθοδος getCurrentPosition() επιστρέφει ένα αντικείμενο με επιτυχία. Το γεωγραφικό πλάτος, Οι ιδιότητες γεωγραφικού μήκους και ακρίβειας επιστρέφονται πάντα. Τα υπόλοιπα ακίνητα επιστρέφονται εάν είναι διαθέσιμο:

coords.latitude

Το γεωγραφικό πλάτος ως δεκαδικός αριθμός (επιστρέφεται πάντα)

coords.longitude

Το γεωγραφικό μήκος ως δεκαδικός αριθμός (επιστρέφεται πάντα)

coords.accuracy

Η ακρίβεια της θέσης (επιστρέφεται πάντα)

coords.altitude

Το υψόμετρο σε μέτρα πάνω από τη μέση στάθμη της θάλασσας (επιστρέφεται εάν υπάρχει)

coords.altitudeAccuracy

Η ακρίβεια υψομέτρου της θέσης (επιστρέφεται εάν είναι διαθέσιμη)

coords.heading

Η κατεύθυνση ως μοίρες δεξιόστροφα από τον Βορρά (επιστρέφεται εάν είναι διαθέσιμη)

coords.speed

Η ταχύτητα σε μέτρα ανά δευτερόλεπτο (επιστρέφεται εάν είναι διαθέσιμη)

timestamp

Η ημερομηνία/ώρα της απάντησης (επιστρέφεται εάν είναι διαθέσιμη)

Αντικείμενο Γεωεντοπισμού - Άλλες ενδιαφέρουσες Μέθοδοι

Το αντικείμενο Geolocation έχει επίσης άλλες ενδιαφέρουσες μεθόδους:

  • watchPosition() - Επιστρέφει την τρέχουσα θέση του χρήστη και συνεχίζει να επιστρέψτε ενημερωμένη θέση καθώς κινείται ο χρήστης (όπως το GPS σε ένα αυτοκίνητο).

  • clearWatch() - Διακόπτει τη μέθοδο watchPosition().

Το παρακάτω παράδειγμα δείχνει τη μέθοδο watchPosition(). Χρειάζεστε μια ακριβή συσκευή GPS για να το ελέγξετε (όπως smartphone):

Παράδειγμα

<script>
const x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
 function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
 }
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
    
function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>