JS Tutoriaal

JS TUIS JS Inleiding JS Waarheen JS Uitset JS Verklarings JS sintaksis JS Kommentaar JS veranderlikes JS Laat JS Konst JS-operateurs JS Rekenkunde JS Opdrag JS datatipes JS Funksies JS Voorwerpe JS Events JS Strings JS String Metodes JS String Soek JS String Templates JS nommers JS-nommermetodes JS Skikkings JS Skikking Metodes JS Array Sorteer JS Skikking Iterasie JS Array Konst JS Datums JS Datum Formate JS Datum Kry Metodes JS Datum Stel Metodes JS Wiskunde JS Random JS Booleans JS Vergelykings JS Voorwaardes JS Skakelaar JS Loop Vir JS Loop For In JS Loop Vir Van JS Loop Terwyl JS Break JS Iterables JS-stelle JS Kaarte JS tipe JS Tipe Omskakeling JS Bitwise JS RegExp JS foute JS Bestek JS Hysing JS Streng modus JS hierdie sleutelwoord JS Arrow Funksie JS Klasse JS JSON JS Ontfouting JS Stylgids JS Beste Praktyke JS foute JS prestasie JS Voorbehou Woorde

JS weergawes

JS weergawes JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS Geskiedenis

JS Voorwerpe

Voorwerpdefinisies Voorwerp Eienskappe Voorwerp Metodes Voorwerp vertoon Voorwerptoebehore Voorwerpkonstrukteurs Voorwerpprototipes Object Iterables Voorwerpstelle Voorwerpkaarte Voorwerpverwysing

JS Funksies

Funksie definisies Funksie parameters Funksie Aanroep Funksie oproep Funksie Pas toe Funksie sluitings

JS Klasse

Klasintro Klas Erfenis Klas Staties

JS Async

JS Terugbelle JS Asynchroon JS Beloftes JS Async/Wag

JS HTML DOM

DOM Inleiding DOM Metodes DOM-dokument DOM Elemente DOM HTML DOM-vorms DOM CSS DOM-animasies DOM-geleenthede DOM Gebeurtenis Luisteraar DOM-navigasie DOM nodusse DOM Versamelings DOM Node lyste

JS Browser BOM

JS venster JS skerm JS ligging JS Geskiedenis JS Navigator JS Popup Alert JS Tydsberekening JS koekies

JS Web API's

Web API Inleiding Webvorms API Webgeskiedenis API Webberging API Webwerker API Web haal API Web Geolocation API

JS AJAX

AJAX Intro AJAX XMLHttp AJAX-versoek AJAX-reaksie AJAX XML-lêer AJAX PHP AJAX ASP AJAX-databasis AJAX toepassings AJAX voorbeelde

JS JSON

JSON Inleiding JSON-sintaksis JSON vs XML JSON-datatipes JSON Ontleed JSON Stringify JSON-voorwerpe JSON-skikkings JSON-bediener JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery keurders jQuery HTML jQuery CSS jQuery DOM

JS grafika

JS grafika JS Canvas JS Plot JS Chart.js JS Google Chart JS D3.js

JS Voorbeelde

JS Voorbeelde JS HTML DOM JS HTML-invoer JS HTML-voorwerpe JS HTML-geleenthede JS Blaaier JS Redakteur JS Oefeninge JS Vasvra JS Sertifikaat

JS Verwysings

JavaScript-voorwerpe HTML DOM-voorwerpe


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 die watchPosition()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>