Gestione degli eventi in Google Maps

Il API Javascript di Google Maps È estremamente potente poiché non solo consente la creazione delle mappe in quanto tali, ma possiamo fare un ulteriore passo avanti estendendo le sue funzionalità e utilizzando i vettori per aggiungere punti di interesse, finestre a discesa, linee e simulazione del percorso.
Un altro dei punti di forza delle mappe che implementiamo e se abbiamo mai lavorato con Javascript sono i eventi, che sono il cuore del linguaggio e si occupano di gestire l'interazione dell'utente con il sito web, in questo caso specifico l'interazione con la nostra mappa.
Prima di andare in pratica dobbiamo prima conoscere alcune delle teorie dietro gli eventi gestiti dall'API, questo usa lo spazio dei nomi google.maps.evento per lavorare con loro. Ha metodi statici per ascoltare gli eventi definiti nell'API e il controller di addListener() per registrarli.
Sapendo questo, vediamo alcuni degli eventi più importanti disponibili nell'API e che utilizzeremo nei nostri esempi:
center_changedQuesto evento viene attivato quando cambia la proprietà del centro della mappa.
clicQuesto evento viene attivato quando l'utente fa clic sulla mappa, è importante ricordare che esclude i clic su indicatori o finestre di informazioni.
trascinareQuesto evento viene generato ripetutamente quando l'utente trascina la mappa.
mossa del mouseQuesto evento viene generato quando l'utente sposta il mouse in un punto qualsiasi del contenitore della mappa.
clic destroQuesto evento viene generato quando viene attivato l'evento del menu di scelta rapida DOM.
zoom_cambiatoQuesto evento viene generato quando la proprietà zoom della mappa cambia.
È importante ricordare che sebbene questi eventi possano sembrare gli eventi standard del SOLE non lo sono, fanno parte del API di Google Maps. Questo per evitare il problema in cui i browser gestiscono diversi tipi di eventi per il SOLE.
Avendo già visto gli eventi più utilizzati dal API Passiamo alla pratica per dimostrare il loro utilizzo nella creazione delle nostre mappe, il primo esempio di questo tutorial sarà incentrato sugli eventi relativi al cambiamento delle proprietà della mappa, che ci consentiranno di ottenere una funzionalità di mappa sincronizzata, ovvero , hanno mappe con basi diverse che mostrano le stesse informazioni indipendentemente dai cambiamenti nel loro centro o nel loro zoom.
Vediamo i passaggi che dobbiamo seguire per raggiungere questo obiettivo:
1- Per prima cosa creiamo un nuovo file che chiameremo synced_maps.html ed effettuiamo l'inclusione dell'API, insieme agli stili che avrà il contenitore delle nostre mappe, è importante definire le variabili globali delle mappe poiché dovremo usarle per tutto l'ambito del programma:

 var mappa1, mappa2; 

2- Come accennato in precedenza, sincronizzeremo due mappe con basi diverse, per questo abbiamo bisogno di creare due funzioni che le inizializzino. Queste funzioni saranno abbastanza simili a quelle che abbiamo imparato nei tutorial passati, tuttavia avranno la gestione degli eventi per ottenere la funzionalità di sincronizzazione, vediamo il codice della prima funzione:

 function initializeMap1 () {var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map1 = nuovo google.maps.Map (mapElement, mapOptions); google.maps.event.addListener (map1, 'center_changed', function () {map2.setCenter (map1.getCenter ());}); google.maps.event.addListener (map1, 'zoom_changed', function () {map2.setZoom (map1.getZoom ());}); } 

Come possiamo vedere, abbiamo le opzioni della nostra mappa come al solito per definire il centro, lo zoom e la base, che in questo caso è ROADMAP, quindi impostiamo le opzioni sulla nostra mappa e infine i nostri eventi che sono responsabili di ottenere i valori delle proprietà della mappa numero 1 e impostarli sulla mappa numero 2, per questo useremo gli eventi di center_changed sì zoom_cambiato questo è ciò che ci permette di sincronizzare.
3- Quindi dobbiamo creare la nostra funzione per inizializzare la seconda mappa, il codice è simile al precedente, tuttavia gli eventi scatteranno dalla mappa numero 2 alla numero 1 e la base sarà IBRIDO per mostrare la differenza tra i due:

 function initializeMap2 () {var mapOptions2 = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID}; var mapElement2 = document.getElementById ('mapDiv2'); map2 = nuovo google.maps.Map (mapElement2, mapOptions2); google.maps.event.addListener (map2, 'center_changed', function () {setTimeout (function () {map1.setCenter (map2.getCenter ());}, 10);}); google.maps.event.addListener (map2, 'zoom_changed', function () {setTimeout (function () {map1.setZoom (map2.getZoom ());}, 10);}); } 

4- Infine creiamo una funzione per istanziare le mappe che ci permetterà di fare l'istanza di entrambi, costruiamo il nostro HTML e mettiamo la stessa classe ai div che conterranno le nostre mappe:

 funzione initializeMaps () {initializeMap1 (); inizializzaMap2 (); } google.maps.event.addDomListener (window, 'load', initializeMaps); Mappe sincronizzate 

Vediamo come appaiono le nostre mappe sincronizzate quando eseguiamo il nostro esercizio nel browser:

INGRANDIRE

È importante ricordare che le modifiche che apportiamo in una mappa si rifletteranno nell'altra e viceversa, vediamo come appare dopo aver modificato la proprietà del centro e dello zoom, poiché rimangono esattamente le stesse tranne che per la base :

INGRANDIRE

Uno degli eventi più popolari e versatili che possiamo trovare è l'uso del mouse come dispositivo per inserire informazioni e interagire con diversi elementi della nostra interfaccia, nelle mappe non è diverso, possiamo usarlo per attivare diversi eventi a seconda al suo utilizzo, in questo esempio utilizzeremo l'evento click per ottenere le coordinate di quel punto specifico, vediamo i passaggi da seguire:
1- Creiamo un nuovo file chiamato get_coordinates.html e includiamo la nostra API insieme agli stili:

2- Quindi creiamo la funzione inizializzaMap() come al solito ma questo avrà qualcosa di diverso ed è la definizione dell'evento clic nel aggiungi ascoltatore insieme all'implementazione di una finestra di dialogo che ci fornirà informazioni sulla latitudine e longitudine del punto in cui clicchiamo, vediamo:

 google.maps.event.addListener (map, 'click', function (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Coordinate del mouse: 
Latitudine: '+ e.latLng.lat () +'
Lunghezza: '+ e.latLng.lng (), posizione: e.latLng}); infowindow.open (mappa); }); 

3- Finalmente costruiamo il nostro HTML e definiamo il nostro contenitore per la mappa:

 Ottenere le coordinate con un clic del mouse

Con il nostro codice finito, vediamo come appare la nostra mappa nel nostro browser quando facciamo clic su di essa e vengono visualizzate le informazioni di latitudine e longitudine di quel punto:

INGRANDIRE

Abbiamo già visto che possiamo ottenere la latitudine e la longitudine di un punto con un semplice clic del nostro mouse, ma questo potrebbe non essere il più preciso per ottenere queste informazioni, quindi possiamo implementare una soluzione che ci permetta di visualizzare la latitudine e longitudine di qualsiasi punto attraverso il quale passiamo il puntatore del nostro mouse, vediamo:
1- Includiamo la nostra API e creiamo i nostri stili per la nostra mappa e per il controllo che avrà il compito di visualizzare le informazioni di latitudine e longitudine:

2- Creiamo la nostra funzione inizializzaMap() come negli esercizi precedenti e definiamo i parametri per il nostro controllo dove lo inizializziamo con le coordinate 0.00 / 0.00:

 var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Lat / Lng: 0.00 / 0.00'; 

3- Quindi dobbiamo creare il controllo e aggiungerlo alla nostra mappa, lo facciamo con google.controls, dove possiamo specificare la posizione in cui sarà, in questo caso useremo IN BASSO A DESTRA che corrisponde nella parte in basso a destra e il contenitore dove verrà visualizzato:

map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);

4- Infine definiamo il nostro evento che sarà di tipo mossa del mouse e inietterà il testo al controllo delle informazioni che otteniamo:

 google.maps.event.addListener (map, 'mousemove', function (e) {var coordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + '/' + e.latLng. lng ().toFixed (6); controlDiv.innerHTML = coordinateText;}); 

Vediamo come si presenta la nostra mappa con il controllo per ottenere le informazioni di latitudine e longitudine:

INGRANDIRE

Per finire vediamo un esempio leggermente più complesso, dove non utilizzeremo solo eventi ma anche vettori e un menu contestuale per dare modo all'utente di comunicare con la nostra mappa in modo più organizzato e diretto, vediamo i passaggi da seguire per raggiungere il nostro obiettivo:
1- Creiamo un file chiamato menu_context.html e includiamo il API Javascript di Google Maps, creiamo anche gli stili per la nostra mappa e il menu contestuale:

2- Prima di creare la nostra funzione inizializzaMap() Dobbiamo eseguire alcuni passaggi aggiuntivi, uno di questi è creare la funzione per definire la classe per il menu contestuale, vediamo:

 menu funzioneContestuale (mappa) {this.setMap (mappa); this.map = mappa; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 

3- Fatto ciò, dobbiamo creare le opzioni per il nostro menu contestuale e aggiungere l'evento che scatterà ciascuno di questi quando selezionato, che come immagineremo sarà clic:

 menuContext.prototype = new google.maps.OverlayView (); menuContext.prototype.draw = function () {}; menuConwoven.prototype.onAdd = function() {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'contextmenu'; this.menuDiv.innerHTML = 'Crea segnalibro
Ingrandisci
Annulla zoom
'; this.getPanes().floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 

4- Per finire con il nostro menu contestuale abbiamo solo bisogno di aggiungere le azioni mostra e nascondi, vediamo come appare la nostra porzione di codice per questo:

 menuConcurrent.prototype.show = function (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (coord); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'blocco'; this.menuDiv.style.left = sinistra + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'visibile'; }; menuConductive.prototype.hide = funzione (x, y) {this.menuDiv.style.visibility = 'nascosto'; } 

5- Dopo aver terminato con il nostro menu contestuale, dobbiamo solo programmare le funzioni per le opzioni nel nostro menu, che sono zoom, annulla zoom e posiziona un marker:

 funzione doZoom () {map.setZoom (map.getZoom () + 1); } funzione annullaZoom () {map.setZoom (map.getZoom () - 1); } function createMarker () {var marker = new google.maps.Marker ({position: lastCoordinate, map: map, title: 'Random Marker'}); } 

6- Infine inizializziamo la nostra mappa, dove l'importante qui è creare il menu contestuale per la nostra mappa e definire l'evento principale clic destro che verrà attivato facendo clic con il tasto destro del mouse quando viene premuto:

 contextMenu = nuovo menuContestuale (mappa); google.maps.event.addListener (map, 'rightclick', function (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 

7- Creiamo il nostro HTML nel modo convenzionale ed eseguiamo il nostro esempio, vediamo come appare il nostro menu contestuale quando facciamo clic con il tasto destro sulla nostra mappa:

INGRANDIRE

Ora proviamo le opzioni del nostro menu contestuale, posizionando alcuni marker e giocando con lo zoom della nostra mappa, vediamo:

INGRANDIRE

Con quest'ultimo esempio terminiamo questo tutorial, avendo imparato a gestire gli eventi del API Javascript di Google Maps per ottenere funzionalità che aumentino l'esperienza dell'utente nelle mappe che creiamo, combinando tecniche avanzate per ottenere funzionalità estese e complesse che faranno risaltare la nostra mappa su qualsiasi sito Web implementato.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo