Wikibooks

Kul med javascript/Enkel geo-positionering

< Kul med javascript


I en tid när allt fler appar och program bygger på att man vet var man står på jorden blir det allt viktigare att programmen får möjlighet att använda den informationen. Genom HTML5 finns möjlighet att lokalisera var sidbesökaren befinner sig. Använder du en mobil används vanligen 3G-nätet eller GPS positionering vilket ger ett hyfsat säkert resultat. Sitter du däremot med en dator som enbart har trådlöst nätverk att tillgå får du ett tämligen ungefärligt värde. Visar det rätt kommun är det bra, visas rätt stad är det fantastiskt.


För att en dator utan vare sig 3G eller GPS öht. skall visa positionen krävs någon form av Internetkontakt, helst trådlös, samt att användaren aktivt godkänner att sidan söker upp var du befinner dig.


Här nedanför finns koden för att få fram latitud och longitud. Latitud är alltså var på jorden du befinner dig på "bredden" och longitud var du befinner dig på "höjden". Din plats på jorden är där de korsas.


Kod för geo-positionering 

<!doctype html>
<html>
<head>
<title>Din plats på jorden</title>
<meta charset="utf-8">

<script>

function displayLocation(position) {
var latitude = position.coords.latitude; //var du befinner dig på jordens "bredd".
var longitude = position.coords.longitude; //var du befinner dig på jordens "höjd".
var div = document.getElementById("location"); //Hitta div-elementet
div.innerHTML = "Du befinner dig på latitud: " + latitude + ", och longitud: " + longitude;
//Skriv ut på sidan de värden du fått fram

//Glöm inte att man normalt måste godkänna att webläsaren söker upp positionen
//Glöm inte heller att en lap-top ger något skumma mätvärden.
}

window.onload = getMyLocation; //När fönstret laddats klart och visas körs funktionen "getMyLocation".

function getMyLocation() {
   if (navigator.geolocation) { //Om man godkänner att positionen söks upp
   navigator.geolocation.getCurrentPosition(displayLocation); //Visa upp den
   } else {
   alert("Hoppsan, du saknar visst stöd för geo-positionering"); //Annars varnar du
   }
}

</script>
</head>
<body>

<div id="location">

Här skrivs positionen ut.

</div>

</body>
</html>

I google earth

Jag fick resultatet: 

Du befinner dig på latitud: 58.283298, och longitud: 11.4333

Vilket i och för sig var både fel stad och fel kommun för mig och min lap-top, men det var i alla fall rätt land...

Om man vill använda resultatet för att söka upp en speciell punkt i Google earth skriver man: 

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://earth.google.com/kml/2.0"> <Document>

<Placemark> 
 <Point>
  <coordinates>
   11.4333, 58.283298, 0. 
  </coordinates>
 </Point>
</Placemark>

</Document> </kml>

Kopiera in koden i en textfil och spara filen som (lämpligt) namn.kml och öppna den sedan i Google earth så får du se vilken punkt som valts ut. Gör det ändå svårare; ändra koden i javascriptet så att hela koden skrivs ut direkt i webläsaren.


(Observera att latitud och longitud är omkastade).


Google maps

Vill du, slutligen, se direkt i google maps var punkten där du befinner dig är lägger man bara in den som en länk. I mitt fall blir det:

http://maps.google.com/maps?q=58.283298+11.4333

Hämtad från ”https://sv.wikibooks.org/w/index.php?title=Kul_med_javascript/Enkel_geo-positionering&oldid=38645”