Uso dei vettori in Google Maps

Le mappe generate con il API Javascript di Google Maps Non saranno sempre statici, sebbene vengano utilizzati la maggior parte del tempo per la visualizzazione, questo non è sempre il caso, ecco perché a volte ci saranno occasioni in cui sarà necessario espandere il loro ambito in modo che possano mostrare informazioni aggiuntive in essi.
Queste informazioni aggiuntive che dobbiamo includere si ottengono con il vettore che non sono altro che forme costituite da punti, dove tutti i tipi di vettori utilizzati dal API Sono chiamati sovrapposizioni o sovrapposizione.
RaccomandazioneNei tutorial passati abbiamo visto l'introduzione a API, abbiamo esaminato le opzioni più importanti, abbiamo imparato come ottenere le credenziali per gli sviluppatori di Google ed eseguiamo alcuni semplici esempi del suo utilizzo, quindi prima di leggere il contenuto di questo tutorial o fare gli esempi qui menzionati, ti consigliamo di dare un'occhiata a questo tutorial.
Dopo aver seguito il tutorial consigliato ed essendo nel contesto, passiamo agli esempi pratici, questo per una migliore comprensione dell'uso dei vettori nelle nostre mappe generate con l'API.
L'uso delle mappe generate con il API è più spesso concentrato su siti Web in cui la sua funzione principale è mostrare la posizione di un'azienda o di un'attività commerciale. Possiamo chiamare questo a punto d'interesse che possiamo rappresentarlo senza problemi con un tipo di vettore, che ai fini del API Javascript di Google Maps è conosciuto come marcatore.
Senza ulteriori indugi, vediamo i passaggi che dobbiamo seguire per implementare un marker standard e inoltre uno personalizzato nella nostra mappa.
1- La prima cosa che dobbiamo fare è includere il API e gli stili per la visualizzazione della nostra mappa, è importante notare che dobbiamo usare il nostro Credenziali sviluppatore Google per il corretto funzionamento di questo esempio:

2- Definiamo le nostre variabili globali, una cosiddetta mappa e una serie di variabili che utilizzeremo per generare marker casuali secondo le coordinate che circondano l'area di Madrid.:

 var mappa; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1; 

3- Quindi definiamo la funzione di inizializzazione della nostra mappa, che conterrà le opzioni più importanti per essa come zoom, tipo di base per la mappa e le coordinate del centro che in questo caso saranno quelli di Madrid, otteniamo il ID del div dal SOLE, inizializziamo la mappa e definiamo una funzione per gestire gli eventi quando posizioniamo i marker sulla mappa, diamo un'occhiata al segmento di codice appena descritto:

 funzione initializeMap() {google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map = new google.maps.Map (mapElement, mapOptions); eventMarker (); } 

4- Ora dobbiamo costruire la nostra funzione eventiMarker () che avrà nella sua definizione due eventi legati per click secondo l'ID che viene premuto da due differenti link e che chiamerà altre due funzioni che si occuperanno di impostare i segnalibri:

 functionMarkerEvents () {document.getElementById ('add_Marker').addEventListener ('click', function () {addMarker ();}); document.getElementById ('add_person_Marker').addEventListener ('click', function () {addPersonMarker ();}); } 

5- Prima di costruire le due funzioni che imposteranno i marker, è importante lavorare sulle coordinate in modo che ci forniscano valori casuali in quell'intervallo e possano essere interpretati dal API Javascript di Google Maps, lo faremo con alcune operazioni aritmetiche sulle variabili globali delle coordinate, vediamo la funzione corrispondente:

 funzione createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.random (); var newLat = minLat + rndNumLat * deltaLat; var rndNumLng = Math.random (); var newLng = minLng + rndNumLng * deltaLng; restituisce new google.maps.LatLng (newLat, newLng); } 

6- Fatto ciò, possiamo costruire le nostre funzioni per fissare i marker alla nostra mappa, per questo lo facciamo con il metodo marcatore Per generare un marker standard e con la funzione precedente generiamo la coordinata casuale dove verrà visualizzato:

 funzione addMarker () {var coordinate = createLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, title: 'Random Marker -' + markerId}); ID marcatore ++; } 

Prima di passare al nostro segnalibro personalizzato È importante ricordare che si basa su icone e queste devono essere disponibili nella directory del nostro progetto, per questo esercizio sono state utilizzate alcune delle icone gratuite disponibili nella pagina delle mappe nella categoria marcatori, quindi funzioneranno per noi senza alcun problema, per questo ne scarichiamo alcuni e li mettiamo in una cartella chiamata img situato alla radice del nostro progetto come possiamo vedere nell'immagine seguente:

INGRANDIRE

7- Dopo aver avuto le nostre icone dobbiamo solo costruire la nostra funzione, per questo creiamo un array con i nomi delle nostre icone e le eseguiremo in modo casuale, dando un parametro aggiuntivo al nostro metodo marcatore chiamata icona che utilizzerà l'immagine scaricata per impostare il marker:

 function addPersonMarker () {var markerIcons = ['comics', 'videogames', 'computers', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var coordinate = createLaLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, icon: 'img /' + markerIcons [rndMarkerId] + '.png.webp', title: 'Random Marker -' + markerId}); ID marcatore ++; } 

8- Infine aggiungiamo l'evento per inizializzare la nostra mappa e creiamo due collegamenti prima del nostro div con gli ID che definiamo per i nostri eventi che chiameranno le funzioni corrispondenti:

 google.maps.event.addDomListener (window, 'load', initializeMap); Aggiungi segnalibri
Aggiungi segnalibro | Aggiungi segnalibro personalizzato

Con questo abbiamo già la nostra mappa con la funzionalità di poter aggiungere marcatori standard sì costume In base a ciò che selezioniamo, è importante ricordare che possiamo aggiungere tutti i segnalibri che vogliamo, questo ci permetterà di vedere il funzionamento dell'API, per finire vediamo come appare quando lo eseguiamo nel nostro browser:

INGRANDIRE

In tutte le applicazioni che troviamo sul web che visualizzano una mappa, non escludono la possibilità di mostrare informazioni relative al punto a cui stanno puntando, ecco perché abbiamo la possibilità di aggiungere una finestra popup o a discesa per visualizzare le informazioni in base a una certa posizione sulla nostra mappa o anche un indicatore, vediamo come possiamo farlo:
1- Creeremo un nuovo file add_popup.html e useremo l'esempio precedente come base per inserire le nuove funzionalità, per questo copiamo e incolliamo il codice della nostra mappa e andremo ad individuare la funzione inizializzaMap() dove dopo aver ottenuto l'ID andremo a definire il popup per il centro della nostra mappa con il metodo InfoWindow, vediamo il codice per la suddetta funzionalità:

 var infowindow = new google.maps.InfoWindow ({content: 'Contenuto del popup:
Questo popup mostra il centro della mappa che è Madrid', posizione: nuovo google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (mappa); 

2- Adesso andiamo a modificare la nostra funzione addMarker () per aggiungere un popup a ciascun marker che appare sulla nostra mappa, per questo utilizzeremo nuovamente la funzione Finestra informazioni () e aggiungeremo un evento per la variabile che definiamo con l'istanza del metodo, vediamo:

 function addMarker() {var coordinate = createLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, title: 'Random Marker -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (marker, 'click', function() {infowindow.open (mappa, indicatore);}); ID marcatore ++; } 

3- Fatto ciò, vediamo come si presenta la nostra mappa con le funzionalità del popup che abbiamo appena incluso:

INGRANDIRE

4- Infine, vediamo la funzionalità simile che applichiamo ai nostri segnalibri, lo facciamo premendo il link Aggiungi segnalibro:

INGRANDIRE

Come abbiamo potuto vedere, estendere la funzionalità delle nostre mappe e marker è abbastanza semplice, dobbiamo solo usare i metodi appropriati per ottenerlo.
Abbiamo già testato la potenza dei vettori mostrando i punti di interesse su una mappa con il marcatoriTuttavia, possiamo usare i vettori per disegnare linee e mostrare il percorso tra due punti sulla nostra mappa, vediamo come lo facciamo:
1- Creeremo un file chiamato add_line.html e includeremo la nostra API così come gli stili del primo esempio, ora andremo a definire le coordinate che vanno da Madrid a Barcellona, vediamo:

 coordinate var Riga = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833,2.1833]]; 

2- Prima di passare alla funzione di inizializzazione della nostra mappa, creeremo prima la funzione addLine() dove la prima cosa che faremo è iterare sull'array di coordinate e creare un nuovo array che conterrà un oggetto di tipo LatLng, vediamo:

 function addLine() {var pointCount = coordinateLine.length; var linePath = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = new google.maps.LatLng (coordinateLine [i] [0], coordinateLine [i] [1]); linePath.push (tempLatLng); } 

3- Quindi impostiamo le proprietà per la nostra linea, come colore, opacità e spessore. Dopo averlo fatto, dobbiamo solo inviare al metodo polilinea le opzioni come parametro e imposta la variabile polilinea sulla mappa corrente:

 var lineOptions = {percorso: linePath, strokeWeight: 7, strokeColor: '# 313cac', strokeOpacity: 0.8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (mappa); } 

4- Finalmente creiamo la nostra ben nota funzione inizializzaMap() e invece di avere una funzione chiamata MarkerEvents alla fine, sostituiremo questa riga con il nome della nostra funzione addLine(), creiamo il nostro codice HTML e lo eseguiamo nel nostro browser, dovrebbe assomigliare a questo:

INGRANDIRE

Nell'esempio precedente aggiungiamo una linea alla nostra mappa e quindi dimostriamo l'unione di due punti per dimostrare il percorso tra di loro, tuttavia questo esempio, nonostante sia illustrativo, manca ancora di qualcosa ed è il fatto di mostrare la mobilità tra questi due punti , come un'auto in movimento.
Questo può sembrare abbastanza complicato ma non lo è, con l'aiuto delle classi e dei metodi del API Possiamo risolverlo con poche righe di codice, vediamo come lo facciamo:
1- La prima cosa è includere il nostro API, i nostri stili e definiamo le nostre variabili globali, utilizziamo le stesse coordinate dell'esempio precedente per utilizzare lo stesso percorso, inoltre definiamo la variabile polilinea globale per poterlo utilizzare nell'intero ambito del nostro Javascript:

 var mappa; var polilinea; coordinate var Linea = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833,2.1833]]; 

2- Ora creiamo la nostra funzione addAnimatedLine() che avrà una struttura simile alla funzione addLine() Dall'esempio precedente, però, questa funzione avrà la definizione del simbolo che utilizzeremo per mostrare l'oggetto in movimento tra questi due punti, in questo caso utilizzeremo una freccia:

 var arrowSymbol = {strokeColor: '# 000', scala: 3, percorso: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 

3- Alla fine dobbiamo solo impostare questa variabile sull'opzione icone dalla definizione della riga:

 var lineOptions = {path: linePath, icons: [{icon: arrow symbol}], strokeWeight: 3, strokeColor: '# 313cac', strokeOpacity: 0.8} 

4- Fatto ciò, dobbiamo solo animare la nostra icona e lo facciamo nella funzione chiamata animateArrow() che dobbiamo includere alla fine della definizione della funzione addAnimatedLine() Vediamo cosa contiene la funzione:

 function animateArrow() {var counter = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var arrows = polyline.get ('icons'); arrows [0] .offset = (counter / 2) + '%'; polyline.set ("icone", frecce);}, 50); } 

5- Per finire inizializziamo la nostra mappa come già sappiamo e chiamiamo la nostra funzione addAnimatedLine()Vediamo quando si esegue come appare nel nostro browser, è importante ricordare che la freccia ha l'effetto di spostarsi da un punto all'altro:

INGRANDIRE

Con quest'ultimo esempio concludiamo questo tutorial, come abbiamo potuto vedere l'utilizzo dei vettori nelle nostre mappe ci permette di aumentarne la funzionalità e l'utilità, dandoci la possibilità di implementare punti di interesse fino a percorsi alternativi ai punti che poniamo in essa .Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo