Web Geolocation API

Προσδιορισμός της τοποθεσίας του χρήστη

Το HTML Geolocation API χρησιμοποιείται για την απόκτηση της τοποθεσίας του χρήστη.

Επειδή μπορεί να βλάψει την ιδιωτικότητα, η τοποθεσία δεν είναι διαθέσιμη εκτός αν ο χρήστης το εγκρίνει.

Δοκιμάστε το προσωπικά

Σημείωση:Η γεωτοποθεσία είναι πιο ακριβής για συσκευές με GPS (π.χ. κινητά τηλέφωνα)=

Όλοι οι περιηγητές υποστηρίζουν το Geolocation API:

Chrome IE Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

Σημείωση:Από το Chrome 50 και μετά, το Geolocation API θα είναι διαθέσιμο μόνο σε ασφαλή περιβάλλοντα, όπως HTTPS. Αν ο ιστότοπός σας托管εται σε μη ασφαλή πηγές (π.χ. HTTP), η αίτηση για τη λήψη της τοποθεσίας του χρήστη δεν θα λειτουργήσει.

Χρήση του Geolocation API

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

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

Παράδειγμα

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "Η γεωγραφική τοποθεσία δεν υποστηρίζεται από αυτόν τον περιηγητή.";
  }
}
function showPosition(position) {
  x.innerHTML = "Γεωγραφικό πλάτος: " + position.coords.latitude +
  "Γεωγραφικό μήκος: " + position.coords.longitude;
}
</script>

Δοκιμάστε το προσωπικά

Παράδειγμα εξήγησης:

  1. Ελέγξτε αν υποστηρίζεται η Geolocation
  2. Αν υποστηρίζεται, εκτελέστε τη μέθοδο getCurrentPosition(). Αν όχι, εμφανίστε ένα μήνυμα στον χρήστη
  3. Αν η μέθοδος getCurrentPosition() είναι επιτυχής, επιστρέφει έναν αντικείμενο coordinates στον ορισμένο παράγοντα της συνάρτησης (showPosition)
  4. Η συνάρτηση showPosition() εκτυπώνει τη γεωγραφική διάσταση και τη λοξόγραμμη

Ο παραπάνω παράδειγμα είναι ένας πολύ βασικός κώδικας γεωτοποθεσίας χωρίς διαχείριση σφαλμάτων.

Διαχείριση σφαλμάτων και απορρήτου

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

Παράδειγμα

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Ο χρήστης αρνήθηκε την αίτηση για τοποθεσία.";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Η πληροφορία τοποθεσίας δεν είναι διαθέσιμη.";
      break;
    case error.TIMEOUT:
      x.innerHTML = "Η αίτηση για τη λήψη της τοποθεσίας του χρήστη εξάντλησε το χρόνο του.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Εγένετο ένα άγνωστο σφάλμα.";
      break;
  }
}

Δοκιμάστε το προσωπικά

Εμφάνιση αποτελεσμάτων στην κάρτα

Εάν θέλετε να εμφανίσετε τα αποτελέσματα στην κάρτα, πρέπει να επισκεφτείτε τις υπηρεσίες της κάρτας, όπως το Google Χάρτη.

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

Παράδειγμα

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+"'>";
}

Τοπικά δεδομένα

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

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

  • Τα πιο πρόσφατα τοπικά δεδομένα
  • Εμφάνιση σημείων ενδιαφέροντος κοντά στον χρήστη
  • Προσανατολισμός από σημείο σε σημείο (Turn-by-turn navigation) (GPS)

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

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

Πρότυπο Επιστροφή
coords.latitude Η γεωγραφική διάρκεια εκφρασμένη ως δεκαδικό αριθμό (ταμπουρωμένα επιστρέφονται πάντα).
coords.longitude Το μήκος της γης εκφρασμένο ως δεκαδικό αριθμό (ταμπουρωμένα επιστρέφονται πάντα).
coords.accuracy Η ακρίβεια της θέσης (ταμπουρωμένα επιστρέφονται πάντα).
coords.altitude Το ύψος πάνω από την μέση επιφάνεια της θάλασσας μετρημένο σε μέτρα (αν είναι διαθέσιμη, επιστρέφεται).
coords.altitudeAccuracy Η ακρίβεια της υψόμετρου της θέσης (αν είναι διαθέσιμη, επιστρέφεται).
coords.heading Η κατεύθυνση πτήσης από βορρά προς τα δεξιά (αν είναι διαθέσιμη, επιστρέφεται).
coords.speed Η ταχύτητα μετρημένη σε μέτρα ανά δευτερόλεπτο (αν είναι διαθέσιμη, επιστρέφεται).
timestamp Η απαντήσιμη ημερομηνία/ώρα (αν είναι διαθέσιμη, επιστρέφεται).

Μέθοδοι του αντικειμένου Geolocation - Άλλες ενδιαφέρουσες μεθόδοι

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

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

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

Παράδειγμα

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  }
    x.innerHTML = "Η γεωγραφική τοποθεσία δεν υποστηρίζεται από αυτόν τον περιηγητή.";
  }
}
function showPosition(position) {
  x.innerHTML = "Γεωγραφικό πλάτος: " + position.coords.latitude +
  "Γεωγραφικό μήκος: " + position.coords.longitude;
}
</script>

Δοκιμάστε το προσωπικά