Γεωθεωρισμός HTML5

Το HTML5 Geolocation χρησιμοποιείται για τη τοποθεσία του χρήστη.

Προσπαθήστε το شخصικά: Εμφανίστε τη τοποθεσία σας στον χάρτη της Google

Τοποθεσία χρήστη

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

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

Υποστήριξη浏览器

Το Internet Explorer 9, Firefox, Chrome, Safari και Opera υποστηρίζουν τη γεωτοποθεσία.

Σημείωση:Για εξοπλισμό με GPS, όπως το iPhone, η γεωτοποθεσία είναι πιο ακριβής.

HTML5 - Χρήση γεωτοποθεσίας

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

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

Παράδειγμα

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

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

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

  • Έλεγχος αν υποστηρίζεται η γεωτοποθεσία
  • Αν υποστηρίζεται, εκτελείται η μέθοδος getCurrentPosition(). Αν δεν υποστηρίζεται, εμφανίζεται ένα μήνυμα στον χρήστη.
  • Αν ο getCurrentPosition() εκτελεστεί επιτυχώς, επιστρέφει έναν αντικείμενο coordinates στον ορισμένο από τον χρήστη παράγοντα showPosition
  • Η συνάρτηση 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="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

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

Κώδικας σφάλματος:

  • Δenyed permission - Ο χρήστης δεν επιτρέπεται γεωτοποθέτηση
  • Διαθέσιμος τοποθεσίας - Η τοποθεσία δεν μπορεί να αποκτηθεί
  • Timeout - Η λειτουργία υπερέβη τον χρόνο εκτέλεσης

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

Για να εμφανίσετε τα αποτελέσματα στον χάρτη, πρέπει να επισκεφθείτε έναν χάρτη υπηρεσία που υποστηρίζει γεωγραφικές συντεταγμένες, όπως το Google Maps ή το Baidu Maps:

Παράδειγμα

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

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

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

Σενάριο Google Maps

Το παρακάτω σύνδεσμο σας δείχνει πώς να χρησιμοποιείτε το σενάριο για να εμφανίζετε μια διαδραστική χάρτη με επιλογές σημαδιών, ζουμ και σύρραξης.

Πληροφορίες της τοποθεσίας

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

Παράδειγμα:

  • Ενημέρωση τοπικών πληροφοριών
  • Εμφάνιση σημείων ενδιαφέροντος γύρω από τον χρήστη
  • Διαδραστικό σύστημα οδηγίας αυτοκινήτου (GPS)

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

Αν επιτυχής, η μέθοδος getCurrentPosition() επιστρέφει ένα αντικείμενο. Πάντα επιστρέφονται οι παραμέτρους latitude, longitude και accuracy. Αν είναι διαθέσιμες, θα επιστρέψουν και άλλες παραμέτρους που αναφέρονται παρακάτω.

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

Όντας αντικείμενο γεωγραφικής τοποθεσίας - Άλλες ενδιαφέρουσες μεθόδους

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

clearWatch() - Σταματά τη μέθοδο watchPosition()

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

Παράδειγμα

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

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