Web Geolocation API
Vind die gebruiker se posisie
Die HTML Geolocation API word gebruik om die geografiese posisie van 'n gebruiker te kry.
Aangesien dit privaatheid kan benadeel, is die posisie nie beskikbaar tensy die gebruiker dit goedkeur nie.
Let wel: Geografiese ligging is die akkuraatste vir toestelle met GPS, soos slimfoon.
Die Geolocation API word in alle blaaiers ondersteun:
Yes | Yes | Yes | Yes | Yes |
Let wel: Vanaf Chrome 50 sal die Geolocation API net op veilige kontekste soos HTTPS werk. As jou werf op 'n nie-veilige oorsprong (soos HTTP) gehuisves word, sal die versoeke om die gebruikers se ligging te kry nie meer funksioneer nie.
Gebruik die Geolocation API
Die getCurrentPosition()
metode word gebruik om die gebruiker se posisie terug te gee.
Die voorbeeld hieronder gee die breedtegraad en lengtegraad van die gebruiker se posisie terug:
Voorbeeld
<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>
Voorbeeld verduidelik:
- Kyk of Geolocation ondersteun word
- As dit ondersteun word, voer die getCurrentPosition() metode uit. Indien nie, wys 'n boodskap aan die gebruiker
- As die getCurrentPosition() metode suksesvol is, stuur dit 'n koördinate-objek terug na die funksie gespesifiseer in die parameter (showPosition)
- Die showPosition()-funksie voer die Latitude en Longitude uit
Die voorbeeld hierbo is 'n baie basiese Geolocation-skrip, met geen fouthantering nie.
Hantering van foute en verwerpings
Die tweede parameter van die getCurrentPosition()
metode word gebruik om foute te hanteer. Dit spesifiseer 'n funksie om te hardloop as dit nie die gebruiker se ligging kry nie:
Voorbeeld
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;
}
}
Vertoon die resultaat in 'n kaart
Om die resultaat op 'n kaart te vertoon, benodig jy toegang tot 'n kaartdiens, soos Google Maps.
In die voorbeeld hieronder word die teruggekeerde breedte- en lengtegraad gebruik om die ligging in 'n Google Map te wys (met behulp van 'n statiese beeld):
Voorbeeld
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+"'>";
}
Liggingspesifieke inligting
Hierdie bladsy het gedemonstreer hoe om 'n gebruiker se posisie op 'n kaart te wys.
Geografiese ligging is ook baie nuttig vir liggingspesifieke inligting, soos:
- Op datum plaaslike inligting
- Wys Belangstellingspunte naby die gebruiker
- Draai-vir-draai-navigasie (GPS)
Die getCurrentPosition() Metode - Gee data terug
Die getCurrentPosition()
metode gee 'n objek op sukses terug. Die breedtegraad, lengtegraad en akkuraatheid eienskappe word altyd teruggegee. Die ander eiendomme word teruggestuur indien beskikbaar:
Property | Returns |
---|---|
coords.latitude | The latitude as a decimal number (always returned) |
coords.longitude | The longitude as a decimal number (always returned) |
coords.accuracy | The accuracy of position (always returned) |
coords.altitude | The altitude in meters above the mean sea level (returned if available) |
coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
coords.heading | The heading as degrees clockwise from North (returned if available) |
coords.speed | The speed in meters per second (returned if available) |
timestamp | The date/time of the response (returned if available) |
Geolocation Object - Ander interessante metodes
Die geolocation-voorwerp het ook ander interessante metodes:
watchPosition()
- Wys die huidige posisie van die gebruiker terug en gaan voort om opgedateerde posisie terug te keer soos die gebruiker beweeg (soos die GPS in 'n motor).clearWatch()
- Stop diewatchPosition()
metode.
Die voorbeeld hieronder toon die watchPosition()
metode. Jy benodig 'n akkurate GPS-toestel om dit te toets (soos slimfoon):
Voorbeeld
<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>