Gestionarea evenimentelor în Google Maps

API Google Maps Javascript Este extrem de puternic, deoarece nu numai că permite crearea hărților ca atare, dar putem face un pas mai departe extinzându-i funcționalitățile și folosind vectori pentru a adăuga puncte de interes, ferestre derulante, linii și simulare a traseului.
Un alt punct forte al hărților pe care le implementăm și dacă am lucrat vreodată cu Javascript sunt evenimente, care sunt nucleul limbajului și sunt responsabile de gestionarea interacțiunii utilizatorului cu site-ul web, în ​​acest caz specific interacțiunea cu harta noastră.
Înainte de a merge la practică, trebuie să cunoaștem mai întâi o parte din teoria din spatele evenimentelor gestionate de API, aceasta utilizează spațiul de nume google.maps.event să lucrez cu ei. Are metode statice pentru a asculta evenimentele definite în API și în controlerul addListener () pentru a le înregistra.
Știind acest lucru, să vedem câteva dintre cele mai importante evenimente disponibile în API și pe care le vom folosi în exemplele noastre:
centru_modificatAcest eveniment este declanșat când proprietatea centrului hărții se schimbă.
clicAcest eveniment este declanșat atunci când utilizatorul face clic pe hartă, este important de menționat că exclude clicurile pe markere sau ferestre de informații.
trageAcest eveniment este declanșat în mod repetat atunci când utilizatorul trage harta.
mousemoveAcest eveniment este declanșat atunci când utilizatorul mută mouse-ul oriunde în containerul hărții.
Click dreaptaAcest eveniment este declanșat când este declanșat evenimentul din meniul contextual DOM.
zoom_changedAcest eveniment este declanșat când se modifică proprietatea zoom a hărții.
Este important de menționat că, deși aceste evenimente pot arăta ca evenimentele standard ale SOARE nu sunt, fac parte din API Google Maps. Aceasta pentru a evita problema în care browserele gestionează diferite tipuri de evenimente pentru SOARE.
După ce am văzut deja evenimentele cele mai folosite de API Să mergem la practică pentru a demonstra utilizarea acestora în crearea hărților noastre, primul exemplu al acestui tutorial va fi axat pe evenimente legate de schimbarea proprietăților hărții, ceea ce ne va permite să obținem o funcționalitate sincronizată a hărții, adică , au hărți cu baze diferite care arată aceleași informații, indiferent de modificările din centrul lor sau de zoom.
Să vedem pașii pe care trebuie să-i urmăm pentru a atinge acest obiectiv:
1- Mai întâi creăm un fișier nou pe care îl vom apela synchronized_maps.html și realizăm includerea API-ului, împreună cu stilurile pe care le va avea containerul hărților noastre, este important să definim variabilele globale ale hărților, deoarece va trebui să le folosim pe tot cuprinsul programului:

 var hartă1, hartă2; 

2- După cum am menționat anterior, vom sincroniza două hărți cu baze diferite, pentru aceasta trebuie să creăm două funcții care le inițializează. Aceste funcții vor fi destul de asemănătoare cu cele pe care le-am stăpânit în tutoriale anterioare, cu toate acestea vor avea gestionarea evenimentelor pentru a realiza funcționalitatea de sincronizare, să vedem codul primei funcții:

 funcția 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 = new 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 ());}); } 

După cum putem vedea, avem opțiunile hărții noastre ca de obicei pentru a defini centrul, zoomul și baza, care în acest caz este HARTA RUTIERĂ, apoi setăm opțiunile pentru harta noastră și în cele din urmă evenimentele noastre care sunt responsabile pentru obținerea valorilor proprietăților hărții numărul 1 și setarea lor pe harta numărul 2, pentru aceasta vom folosi evenimentele din centru_modificat Da zoom_changed asta ne permite să sincronizăm.
3- Apoi, trebuie să ne creăm funcția pentru a inițializa a doua hartă, codul este similar cu cel anterior, totuși evenimentele se vor declanșa de la harta numărul 2 la numărul 1, iar baza va fi HIBRID pentru a arăta diferența dintre ambele:

 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 = new 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- În cele din urmă, creăm o funcție pentru instanțierea hărților, care ne va permite să creăm instanța ambelor, ne construim HTML și punem aceeași clasă divs-urilor care vor conține hărțile noastre:

 funcția initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (fereastră, 'load', initializeMaps); Hărți sincronizate 

Să vedem cum arată hărțile noastre sincronizate atunci când ne executăm exercițiul în browser:

MARI

Este important de menționat că modificările pe care le facem într-o hartă se vor reflecta în cealaltă și invers, să vedem cum arată după ce schimbăm proprietatea centrului și zoom-ul, deoarece acestea rămân exact aceleași cu excepția bazei :

MARI

Unul dintre cele mai populare și versatile evenimente pe care le putem găsi este utilizarea mouse-ului ca dispozitiv pentru introducerea informațiilor și interacțiunea cu diferite elemente ale interfeței noastre, în hărți nu este diferit, îl putem folosi pentru a declanșa diferite evenimente în funcție de la utilizarea acestuia, în acest exemplu vom folosi evenimentul de clic pentru a obține coordonatele acelui punct specific, să vedem pașii de urmat:
1- Creăm un nou fișier numit get_coordinates.html și includem API-ul nostru împreună cu stilurile:

2- Apoi creăm funcția initializeMap () ca de obicei, dar acest lucru va avea ceva diferit și este definiția evenimentului clic în addListener împreună cu implementarea unui dialog care ne va oferi informații despre latitudinea și longitudinea locului în care facem clic, să vedem:

 google.maps.event.addListener (hartă, „clic”, funcție (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Coordonatele mouse-ului: 
Latitudine: '+ e.latLng.lat () +'
Lungime: '+ e.latLng.lng (), poziție: e.latLng}); infowindow.open (hartă); }); 

3- În cele din urmă ne construim HTML și ne definim containerul pentru hartă:

 Obținerea coordonatelor cu clicul mouse-ului

Odată terminat codul, să vedem cum arată harta noastră în browserul nostru când facem clic pe el și sunt afișate informațiile de latitudine și longitudine ale acelui punct:

MARI

Am văzut deja că putem obține latitudinea și longitudinea unui punct cu doar un clic al mouse-ului, dar este posibil să nu fie cea mai precisă pentru a obține aceste informații, deci putem implementa o soluție care ne permite să vizualizăm latitudinea și longitudinea oricărui punct prin care trecem indicatorul mouse-ului nostru, să vedem:
1- Includem API-ul nostru și creăm stilurile noastre pentru harta noastră și pentru controlul care va fi responsabil de afișarea informațiilor despre latitudine și longitudine:

2- Ne creăm funcția initializeMap () ca și în exercițiile anterioare și definim parametrii pentru controlul nostru unde îl inițializăm cu coordonatele 0.00 / 0.00:

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

3- Apoi, trebuie să creăm controlul și să-l adăugăm pe harta noastră, facem acest lucru cu google.controls, unde putem specifica poziția în care va fi, în acest caz vom folosi DREAPTA JOS care corespunde în partea din dreapta jos și containerul unde va fi afișat:

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

4- În cele din urmă ne definim evenimentul care va fi de tip mousemove și va injecta textul pentru controlul informațiilor pe care le obținem:

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

Să vedem cum arată harta noastră cu controlul pentru a obține informații despre latitudine și longitudine:

MARI

Pentru a finaliza, să vedem un exemplu puțin mai complex, în care vom folosi nu numai evenimente, ci și vectori și un meniu contextual pentru a oferi utilizatorului o modalitate de a comunica cu harta noastră într-un mod mai organizat și mai direct, să vedem pașii de urmat pentru atingeți obiectivul nostru:
1- Creăm un fișier numit menu_contextual.html și includem API Google Maps Javascript, creăm, de asemenea, stilurile pentru harta și meniul contextual:

2- Înainte de a ne crea funcția initializeMap () Trebuie să efectuăm câțiva pași suplimentari, unul dintre ei este să creăm funcția pentru a defini clasa pentru meniul contextual, să vedem:

 meniu funcțional Contextual (hartă) {this.setMap (hartă); this.map = hartă; this.mapDiv = map.getDiv (); this.menuDiv = nul; }; 

3- Odată ce acest lucru este făcut, trebuie să creăm opțiunile pentru meniul nostru contextual și să adăugăm evenimentul care va declanșa fiecare dintre acestea atunci când este selectat, care așa cum ne vom imagina va fi clic:

 menuContextual.prototype = new google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function () {var that = aceasta; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'contextmenu'; this.menuDiv.innerHTML = 'Creați un marcaj
Zoom
Anulați zoomul
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 

4- Pentru a finaliza cu meniul nostru contextual, trebuie doar să adăugăm acțiunile de spectacol și ascundere, să vedem cum arată porțiunea noastră de cod pentru aceasta:

 menuContextual.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 = 'blocare'; this.menuDiv.style.left = left + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'vizibil'; }; menuContextual.prototype.hide = funcție (x, y) {this.menuDiv.style.visibility = 'ascuns'; } 

5- După ce am terminat cu meniul nostru contextual, trebuie doar să programăm funcțiile pentru opțiunile din meniul nostru, care sunt de a mări, anula zoom și a plasa un marker:

 funcția doZoom () {map.setZoom (map.getZoom () + 1); } function undoZoom () {map.setZoom (map.getZoom () - 1); } funcție createMarker () {var marker = new google.maps.Marker ({poziție: ultimulCoordonat, hartă: hartă, titlu: 'Marcator aleator'}); } 

6- În cele din urmă ne inițializăm harta, unde important este să creăm meniu contextual pentru harta noastră și definiți evenimentul principal Click dreapta care va fi declanșat de clicul dreapta al mouse-ului la apăsare:

 contextMenu = new menuContextual (hartă); google.maps.event.addListener (hartă, 'clic dreapta', funcție (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 

7- Noi ne creăm HTML în mod convențional și rulați exemplul nostru, să vedem cum arată meniul nostru contextual atunci când facem clic dreapta pe harta noastră:

MARI

Acum, să încercăm opțiunile meniului nostru contextual, plasând niște markere și jucându-ne cu zoomul hărții noastre, să vedem:

MARI

Cu acest ultim exemplu încheiem acest tutorial, după ce am învățat să gestionăm evenimentele din API Google Maps Javascript pentru a realiza funcționalități care sporesc experiența utilizatorului în hărțile pe care le creăm, combinând tehnici avansate pentru a realiza funcționalități extinse și complexe care vor face harta noastră să iasă în evidență pe orice site web implementat.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv