Sommario
I servizi offerti da API Javascript di Google Maps sono tanto vari quanto funzionali, hanno una qualità che li differenzia Google Maps Dai loro concorrenti, questi servizi funzionano generalmente in modo asincrono, il che consente di inviare la richiesta a un server esterno e un metodo di tipo callback è responsabile dell'elaborazione delle risposte.Uno dei punti di forza di questi servizi è la piena compatibilità con le classi e gli oggetti API. Possiamo dalla consultazione dell'indirizzo di un punto specifico sulla nostra mappa fino all'implementazione della street view.
Prima di passare agli esempi, vediamo alcuni dei servizi più importanti che utilizzeremo in questo tutorial.
Codifica geograficaQuesto servizio ci permette di trasformare indirizzi comuni in coordinate geografiche in base alla latitudine e longitudine di un punto, questo ci permette di posizionare dei marker o posizionare la nostra mappa, per eseguire queste operazioni l'API mette a disposizione una classe chiamata geocodificatore ().
Matrice delle distanzeQuesto servizio ci aiuta a calcolare la distanza e la durata del percorso tra più punti, cosa oggi ampiamente utilizzata, per questo abbiamo lo scopo di google.maps.DistanceMatrixService e i suoi metodi associati.
Vista stradaleServizio Vista stradale o street view ci offre viste panoramiche a 360 gradi nelle aree in cui ha copertura, qualcosa che farà risaltare senza dubbio le nostre mappe.
Ricorda che qui ho dettagliato il funzionamento dell'API e la gestione degli eventi in Google Maps e l'Introduzione per comprendere l'API Javascript in Google Maps.
Per eseguire questo esempio utilizzeremo il servizio geocodificatore () Ma come abbiamo detto, questo ci permette di trasformare un indirizzo in una coordinata, questo va bene, ma per l'utente convenzionale è qualcosa che non vede molto utile per questo motivo useremo il geocodificatore inverso per ottenere l'indirizzo di cui abbiamo bisogno con un clic. Vediamo i passaggi che dobbiamo seguire:
1- Innanzitutto, come già sappiamo, includiamo l'API, senza dimenticare di utilizzare le nostre credenziali, oltre a questo includeremo la libreria di disegno che ci permetterà di implementare la funzionalità dei marker di disegno, concateniamo questa libreria alla nostra credenziale con il simbolo & come vedremo di seguito:
2- Non possiamo dimenticare gli stili per la mappa, che le daranno il tipo di visualizzazione sulla pagina, oltre a definire le variabili globali che avranno un ambito globale in tutti i metodi del nostro codice:
var mappa; var geocoder var popup;
3- Dopodiché definiamo il nostro metodo inizializzaMap() dove la prima cosa che faremo è dichiarare il nostro oggetto di tipo geocodificatore aiutandoci dalla classe Geocodificatore () e con InfoFinestra l'oggetto per il popup che visualizzerà l'indirizzo sullo schermo:
funzione initializeMap () {geocoder = new google.maps.Geocoder (); popup = nuovo google.maps.InfoWindow (); 4- Includiamo le opzioni convenzionali della mappa come il centro, lo zoom e il tipo di base, otteniamo l'elemento SOLE e istanziamo il metodo Carta geografica:
google.maps.visualRefresh = vero; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Ora creiamo il gestore dei disegni che ci permetterà di disegnare i marker, per questo faremo un'istanza di Gestore del disegno, lo rendiamo visibile nell'interfaccia utente e selezioniamo quali modalità verranno visualizzate nel controllo e in quale posizione saranno:
var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); 6- Ora abilitiamo la funzionalità appena creata, aggiungiamo l'ascoltatore per il nostro evento e per esibirci geocodificatore inverso otteniamo la posizione in latitudine e longitudine del nostro marker con il metodo getPosition():
drawingManager.setMap (mappa); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- Per completare il geocodificatore inverso useremo il servizio di geocodifica () e faremo un condizionale per verificare che il servizio restituisca una risposta valida se non lo gestiamo in modo che l'utente sappia che non è riuscito e se il risultato è corretto chiamiamo il nostro metodo Mostra indirizzo ():
geocoder.geocode ({'latLng': markerPosition}, funzione (risultati, stato) {if (status == google.maps.GeocoderStatus.OK) {if (risultati) {ShowAddress (risultati [0], marker);}} else {avviso ("Servizio fallito:" + stato);}}); 8- Infine, dobbiamo solo costruire il metodo di Mostra indirizzo () che riceverà il risultato del nostro geocoder inverso e la posizione del marker, con questo possiamo stabilire il centro e visualizzare le informazioni dell'indirizzo formattato senza alcun problema:
funzione ShowAddress (risultato, marker) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Indirizzo: '+ risultato.formattato_indirizzo; popup.setContent (popupContent); popup.open (mappa, marcatore); } 9- Chiudiamo i tag corrispondenti e aggiungiamo la porzione di codice HTML per completare il nostro esempio:
Trova l'indirizzo sulla mappa con un clic
10- Eseguiamo nel nostro browser e clicchiamo su un punto qualsiasi della nostra mappa e otterremo l'indirizzo visualizzato nel popup che dichiariamo, dovrebbe apparire come segue:
INGRANDIRE
Il API Javascript di Google Maps ci fornisce servizi molto utili, uno di questi è il matrice di distanza che ci permette di calcolare la distanza e il tempo tra più punti, una funzionalità che possiamo utilizzare per implementare diverse soluzioni in qualsiasi attività commerciale, dal calcolo dei tempi di consegna o stabilire il percorso più ottimale tra i vari punti. Vediamo i passaggi che dobbiamo seguire per implementare questa funzionalità tra le nostre mappe.
1- Includiamo la nostra API insieme alla libreria disegno, così come gli stili per la visualizzazione della nostra mappa e il contenitore della nostra matrice:
2- Definiamo variabili globali da utilizzare in tutto l'ambito del nostro codice e nella funzione inizializzaMap() Inizializziamo gli array per gestire la latitudine e la longitudine sia dell'origine che della destinazione:
var mappa; var originLatLon; var destinazioneLatLon; var distanzaMatrixService; var markerCount; var arrayResult; funzione initializeMap() {originLatLon = []; destinazioneLatLon = []; 3- Quindi nella stessa funzione otteniamo il pulsante e il gestore di eventi per esso, inoltre inizializziamo l'oggetto per il servizio di DistanceMatrixService così come il contatore per i marcatori e assegna il risultato dell'array a un contenitore div:
var generateBtnMatrix = document.getElementById ('generateMatrix'); generateBtnMatrix.addEventListener ("clic", funzione () {MatrixRequest ();}); distanceMatrixService = new google.maps.DistanceMatrixService (); markerCount = 0; array di risultati = document.getElementById ('array di risultati'); 4- Includiamo le opzioni convenzionali della mappa come il centro, lo zoom e il tipo di base, otteniamo l'elemento SOLE e istanziamo il metodo Carta geografica:
google.maps.visualRefresh = vero; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Come nell'esercizio precedente abbiamo creato il gestore del disegno che ci permetterà di disegnare i marker, per questo faremo un'istanza di Gestore del disegno e forniamo le opzioni necessarie, lo abilitiamo e aggiungiamo l'ascoltatore per l'evento:
var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER]}}); drawingManager.setMap (mappa); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Successivamente eseguiamo le convalide per limitare il numero di destinazioni consentite e impostiamo le icone che utilizzeremo per i nostri segnalibri:
markerCount ++; if (markerCount> 10) {alert ("Non sono consentite altre destinazioni"); drawingManager.setMap (null); marker.setMap (null); Restituzione; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } else {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.png.webp'); }}); 7- Ora non ci resta che creare le nostre funzioni per gestire le richieste fatte al servizio di distanzaMatrixService, prima creiamo quello che preparerà la proprietà della richiesta:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({origins: LatinSource, destinazioni: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Creiamo la funzione per il callback e che ci permetterà di ottenere la risposta del servizio e nella quale inseriremo le convalide necessarie nel caso in cui il servizio non riesca a gestire l'errore nel modo migliore:
funzione getResultMatrix (risultato, stato) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = result.originAddresses; var destinationAddresses = result.destinationAddresses; for (var i = 0, l = originAddresses.length; i <l; i ++) {var elements = result.rows [i] .elements; for (var j = 0, m = elementi.lunghezza; j <m; j ++) {var originAddress = originAddresses [i]; var destinationAddress = destinationAddresses [j]; elemento var = elementi [j]; var distanza = elemento.distanza.testo; var durata = elemento.durata.testo; risultatiDivMatrix (originAddress, destinationAddress, distanza, durata, i, j); }}} else {alert ('Impossibile ottenere l'array:' + stato); } 9- Inoltre creiamo la funzione che scriverà i risultati ottenuti nel div corrispondente:
functionDivMatrixResults (originAddress, destinationAddress, distanza, durata, originAddressCount, destinationAddressCount) {var esistentiContent = resultResult.innerHTML; var nuovoContenuto; nuovoContenuto = 'Origine '+ countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; nuovoContenuto + = 'Destinazione '+ countLetters (destinationAddressCount) +':
'; newContent + = indirizzodestinazione + '
'; nuovoContenuto + = 'Destino: '+ distanza +'
'; nuovoContenuto + = 'Destino: '+ durata +'
'; nuovoContenuto + = '
'; resultArray.innerHTML = esistenteContenuto + nuovoContenuto; } 9- Infine nel nostro Javascript Gestiamo i contatori in una funzione per restituire il nome corrispondente al contatore del marker che stiamo posizionando:
funzione countLetters (count) {switch (count) {case 0: return 'Fumetti'; caso 1: restituire "Negozio di videogiochi"; caso 2: restituire "Fumetti"; caso 3: restituire "Fumetti"; caso 4: restituire "Negozio di videogiochi"; default: restituisce null; }} 10- Chiudiamo i tag corrispondenti e aggiungiamo la parte del codice HTML per completare il nostro esempio:
Usa matrice di distanza
11- Eseguiamo il nostro esempio nel browser e per visualizzare il funzionamento della nostra mappa posizioneremo 4 punti di interesse e premeremo il pulsante Genera matrice distanza:
INGRANDIRE
Per finire questo tutorial implementeremo il servizio Vista stradale, è un esempio abbastanza semplice ma che sommato agli altri servizi disponibili, farà risaltare le nostre mappe sopra le altre, vediamo cosa dobbiamo fare per implementare questo servizio:
1- Includiamo l'API e definiamo gli stili corrispondenti, in questo esempio non utilizzeremo la libreria di disegni quindi non sarà inclusa:
2- Definiamo le nostre variabili globali e creiamo la nostra funzione inizializzaMap() Con le opzioni convenzionali, centro della nostra mappa, zoom e tipo di base, otteniamo l'elemento SOLE e istanziamo il metodo Carta geografica:
var mappa; var geocodificatore; var streetView; funzione initializeMap () {popup = new google.maps.InfoWindow (); geocoder = new google.maps.Geocoder (); google.maps.visualRefresh = vero; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 3- All'interno della nostra funzione chiamiamo il servizio di Vista stradale e dopo questo creiamo una funzione per impostare le sue opzioni come posizione e punto di vista:
streetView = map.getStreetView (); } function setOptionsStreetView (posizione) {streetView.setPosition (posizione); streetView.setPov ({intestazione: 0, prurito: 10}); } 4- Infine creiamo le funzioni per poter passare dalla visualizzazione convenzionale della mappa al Street View, vediamo come sono:
funzione showMap() {streetView.setVisible (false); } funzione showStreetView() {setStreetViewOptions (map.getCenter()); streetView.setVisible (vero); } 5- Chiudiamo i tag corrispondenti e aggiungiamo la parte del codice HTML per completare il nostro esempio:
Mappa con Street View
6- Eseguiamo il nostro esempio nel browser e premiamo il pulsante Mostra Street View per visualizzare la funzionalità come possiamo vedere nell'immagine seguente:
INGRANDIRE
Con questo concludiamo questo tutorial, in quanto abbiamo potuto apprezzare i servizi presenti nel API Javascript di Google Maps Ci consentono di estendere molto di più le funzionalità delle nostre mappe, posizionandole come un'opzione da tenere in considerazione nei sistemi che implementiamo che devono utilizzare calcoli di posizione e tempo e / o distanza.
Ti ricordo questo tutorial, che ti tornerà utile anche: Impara l'uso dei vettori in Google MapsTi è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
