Esercitazione JS

JS CASA JS Introduzione JS Dove si va Uscita JS Dichiarazioni JS Sintassi JS Commenti JS Variabili JS JS Let JS Cost Operatori JS JS aritmetica Assegnazione JS Tipi di dati JS Funzioni JS Oggetti JS Eventi JS Corde JS Metodi di stringa JS Ricerca di stringhe JS Modelli di stringhe JS Numeri JS Metodi numerici JS Matrici JS Metodi array JS Ordinamento matrice JS Iterazione dell'array JS Cost. array JS Date JS Formati data JS Metodi di acquisizione della data JS Metodi di impostazione della data JS JS matematica JS Casuale JS booleani Confronti JS Condizioni JS JS Switch Ciclo JS per JS Loop per In Ciclo JS per di JS Loop mentre JS Break Iterabili JS Insiemi JS Mappe JS Tipo JS Conversione del tipo JS JS bit a bit JS RegExp Errori JS Ambito JS JS sollevamento Modalità rigorosa JS JS questa parola chiave Funzione freccia JS Classi JS JS JSON Debug JS Guida allo stile JS Migliori Pratiche JS Errori di JS Prestazioni JS Parole riservate JS

Versioni JS

Versioni JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Storia di JS

Oggetti JS

Definizioni di oggetti Proprietà dell'oggetto Metodi dell'oggetto Visualizzazione di oggetti Accessori per oggetti Costruttori di oggetti Prototipi di oggetti Iterabili di oggetti Insiemi di oggetti Mappe degli oggetti Riferimento all'oggetto

Funzioni JS

Definizioni delle funzioni Parametri di funzione Invocazione di funzione Chiamata di funzione Funzione Applica Chiusure di funzioni

Classi JS

Introduzione alla classe Eredità di classe Classe statica

JS Async

Richiamate JS JS asincrono JS Promesse JS Async/Attendere

JS HTML DOM

DOM Introduzione Metodi DOM Documento DOM Elementi DOM DOM HTML Moduli DOM DOM CSS Animazioni DOM Eventi DOM Ascoltatore di eventi DOM Navigazione DOM Nodi DOM Collezioni DOM Elenchi di nodi DOM

Distinta base del browser JS

Finestra JS Schermo JS Posizione JS Storia di JS Navigatore JS Avviso popup JS JS tempismo Biscotti JS

API Web JS

Introduzione all'API Web API dei moduli Web API Cronologia web API di archiviazione Web API Web Worker API di recupero Web API di geolocalizzazione web

JS AJAX

Introduzione all'Ajax AJAX XMLHttp Richiesta AJAX Risposta dell'AJAX File XML AJAX AJAX PHP AJAX ASP Database AJAX Applicazioni AJAX Esempi AJAX

JS JSON

Introduzione JSON Sintassi JSON JSON contro XML Tipi di dati JSON Analisi JSON JSON Stringify Oggetti JSON Matrici JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selettori jQuery jQuery HTML jQuery CSS jQuery DOM

Grafica JS

Grafica JS Tela JS JS Plotly JS Chart.js Grafico di Google JS JS D3.js

Esempi JS

Esempi JS JS HTML DOM Input HTML JS Oggetti HTML JS Eventi HTML JS Browser JS Editore JS Esercizi JS Quiz J.S Certificato JS

Riferimenti JS

Oggetti JavaScript Oggetti HTML DOM


API di geolocalizzazione web


Individua la posizione dell'utente

L'API di geolocalizzazione HTML viene utilizzata per ottenere la posizione geografica di un utente.

Poiché ciò può compromettere la privacy, la posizione non è disponibile a meno che l'utente non la approvi.

Nota: la geolocalizzazione è più precisa per i dispositivi con GPS, come gli smartphone.


L'API di geolocalizzazione è supportata in tutti i browser:

Yes Yes Yes Yes Yes

Nota: a partire da Chrome 50, l'API di geolocalizzazione funziona solo in contesti sicuri come HTTPS. Se il tuo sito è ospitato su un'origine non sicura (come HTTP), le richieste per ottenere la posizione degli utenti non funzioneranno più.


Utilizzo dell'API di geolocalizzazione

Il getCurrentPosition()metodo viene utilizzato per restituire la posizione dell'utente.

L'esempio seguente restituisce la latitudine e la longitudine della posizione dell'utente:

Esempio

<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>

Esempio spiegato:

  • Verifica se la geolocalizzazione è supportata
  • Se supportato, esegui il metodo getCurrentPosition(). In caso contrario, visualizzare un messaggio per l'utente
  • Se il metodo getCurrentPosition() ha esito positivo, restituisce un oggetto coordinate alla funzione specificata nel parametro (showPosition)
  • La funzione showPosition() restituisce la latitudine e la longitudine

L'esempio sopra è uno script di geolocalizzazione molto semplice, senza gestione degli errori.



Gestione degli errori e dei rifiuti

Il secondo parametro del getCurrentPosition()metodo viene utilizzato per gestire gli errori. Specifica una funzione da eseguire se non riesce a ottenere la posizione dell'utente:

Esempio

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;
  }
}

Visualizzazione del risultato in una mappa

Per visualizzare il risultato in una mappa, devi accedere a un servizio di mappe, come Google Maps.

Nell'esempio seguente, la latitudine e la longitudine restituite vengono utilizzate per mostrare la posizione in una mappa di Google (utilizzando un'immagine statica):

Esempio

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+"'>";
}

Informazioni specifiche sulla posizione

Questa pagina ha dimostrato come mostrare la posizione di un utente su una mappa.

La geolocalizzazione è anche molto utile per informazioni specifiche sulla posizione, come:

  • Informazioni locali aggiornate
  • Visualizzazione dei punti di interesse vicino all'utente
  • Navigazione turn-by-turn (GPS)

Il metodo getCurrentPosition() - Restituisce i dati

Il getCurrentPosition()metodo restituisce un oggetto in caso di successo. Le proprietà di latitudine, longitudine e precisione vengono sempre restituite. Le altre proprietà vengono restituite se disponibili:

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)

Oggetto di geolocalizzazione - Altri metodi interessanti

L'oggetto Geolocalizzazione ha anche altri metodi interessanti:

  • watchPosition() - Restituisce la posizione corrente dell'utente e continua a restituire la posizione aggiornata mentre l'utente si sposta (come il GPS in un'auto).
  • clearWatch()- Interrompe il watchPosition()metodo.

L'esempio seguente mostra il watchPosition()metodo. Hai bisogno di un dispositivo GPS accurato per testare questo (come uno smartphone):

Esempio

<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>