NemProgrammering.dk logo
nordicway webhotel

HTML5 - Geo lokationer

HTML5 kursus | Lær at anvende HTML5
WordPress hjemmeside hjælp

Information om denne video

Underviser: Joakim Børlum Petersen, www.Snowhat.dk

I denne video viser vi kort, hvordan man kan finde en brugers lokation eller position ved hjælp af HTML5 og JavaScript. Geolocation bruges til at finde en given brugers geografiske position ud fra en række oplysninger som stilles til rådighed på den enhed brugeren besøger din side med. Hele opkoblingen til Geolocation API'en håndteres via Javascript i browseren, hvor man kan få adgang til brugerens lokation på baggrund af en længe- og breddegrad.

Geolocation tilbyder grundlæggende to forskellige funktioner til finde brugerens location nemlig getCurrentPosition() og watchPosition(). Den første vil du se blive brugt i denne video, og det umiddelbare formål med denne funktion er at returnerer et såkaldt "single-shot" af brugerens lokation. Det vil sige du får længde og breddegrad for den seneste kendte lokation på brugerens enhed. Brugen af geolokationer kommer specielt til sin ret på mobile enheder, hvor du via gps´en i enheden hurtigt kan fremvise brugers position på et kort.

Herunder finder du koderne der bliver lavet i videoen - kopier dem gerne!

Video tags:

Denne video relaterer til emner såsom: HTML5 kursus, HTML5 guide, Gratis HTML5 undervisning, HTML5 video tutorials på dansk, HTML5 introduktion, muligheder med HTML5, HTML5 - den nye standard

Her har du kildekoden

 <!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Lotte, hvor er du henne?</title>
		<script src="myLoc.js"></script>
	</head>
	
	<body>
		<div id="location">
			Location here.
		</div>
	</body>
</html>


Javsscriptet:



window.onload = getMyLocation;

function getMyLocation(){
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(displayLocation);
    } else {
        alert('Du har en for gammel browser!'); 
    }  
}

function displayLocation(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var div = document.getElementById('location');

    div.innerHTML = 'Du er ved ' + latitude + '|' + longitude;    
}

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

Url´er bliver automatisk omdannet til links (nofollow).