NemProgrammering.dk logo
3 måneders gratis webhotel til alle NemProgrammering.dk brugere! Få din UnoEuro Rabatkode her
UnoEuro rabatkode

HTML5 - Geo lokationer

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops. Læs mere om vores ydelser her!

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! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar ved tasterne.

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