HTML Geolocation API används för att få en användares geografiska position.
Eftersom detta kan äventyra integriteten är positionen inte tillgänglig om inte användaren godkänner den.
Geolokalisering är mest exakt för enheter med GPS, som smartphones.
Geolocation API stöds i alla webbläsare:
Yes | Yes | Yes | Yes | Yes |
Geolocation API kommer endast att fungera i säkra sammanhang som t.ex som HTTPS.
Om din webbplats är värd på ett icke-säkert ursprung (som HTTP) förfrågningar om att få användarens plats kommer inte längre att fungera.
Metoden getCurrentPosition()
används för att returnera användarens position.
Exemplet nedan returnerar latitud och longitud för användarens position:
<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>
Prova själv →
<!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>
Exempel förklarat:
Kontrollera om Geolocation stöds
Kör metoden getCurrentPosition() om det stöds. Om inte, visa ett meddelande för användaren
Om metoden getCurrentPosition() lyckas, returnerar den ett koordinatobjekt till den funktion som anges i parametern (showPosition)
Funktionen showPosition() matar ut latitud och longitud
Exemplet ovan är ett mycket grundläggande Geolocation-skript, utan felhantering.
Den andra parametern i metoden getCurrentPosition()
används för att hantera fel. Den anger en funktion som ska köras om den inte kan få användarens plats:
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;
}
}
Prova själv →
<!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>
För att visa resultatet på en karta behöver du tillgång till en karttjänst, som Google Kartor.
I exemplet nedan används den returnerade latitud och longitud för att visa platsen i en Google Karta (med en statisk bild):
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+"'>";
}
Prova själv
<!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>
Hur man visar en interaktiv Google-karta med en markör, zoom- och dragalternativ.
Google Map Script
<!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>
Den här sidan har visat hur man visar en användares position på en karta.
Geolokalisering är också mycket användbar för platsspecifik information, som:
Uppdaterad lokal information
Visar intressanta platser nära användaren
Sväng-för-sväng-navigering (GPS)
Metoden getCurrentPosition()
returnerar ett objekt vid framgång. Latituden, egenskaper för longitud och noggrannhet returneras alltid. Övriga fastigheter återlämnas om tillgänglig:
Latituden som ett decimaltal (retureras alltid)
Longituden som ett decimaltal (retureras alltid)
Positionens noggrannhet (retureras alltid)
Höjden i meter över medelhavsytan (returneras om tillgängligt)
Positionens höjdnoggrannhet (returneras om tillgängligt)
Rubriken som grader medurs från norr (returneras om tillgängligt)
Hastigheten i meter per sekund (returneras om tillgängligt)
Datum/tid för svaret (returneras om tillgängligt)
Geolocation-objektet har också andra intressanta metoder:
watchPosition()
- Returnerar användarens nuvarande position och fortsätter till returnera uppdaterad position när användaren rör sig (som GPS i en bil).
clearWatch()
- Stoppar watchPosition()
-metoden.
Exemplet nedan visar metoden watchPosition()
. Du behöver en korrekt GPS-enhet för att testa detta (som 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>
Prova själv →
<!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>