Händelsehantering i Google Maps

De Google Maps Javascript API Det är extremt kraftfullt eftersom det inte bara tillåter skapandet av kartorna som sådana, men vi kan gå ett steg längre genom att utöka dess funktioner och använda vektorer för att lägga till intressanta platser, nedrullningsbara fönster, linjer och rutesimulering.
En annan av styrkorna i kartorna som vi implementerar och om vi någonsin har arbetat med Javascript är evenemang, som är kärnan i språket och som ansvarar för att hantera användarens interaktion med webbplatsen, i detta specifika fall interaktionen med vår karta.
Innan vi går till träning måste vi först känna till en del av teorin bakom händelserna som hanteras av API: et, det använder namnområdet google.maps.event att arbeta med dem. Den har statiska metoder för att lyssna på de händelser som definieras i API: et och kontrollen för addListener () att registrera dem.
Genom att veta detta, låt oss se några av de viktigaste händelserna som finns tillgängliga i API: et och som vi kommer att använda i våra exempel:
center_changedDenna händelse utlöses när egenskapen för kartans mitt ändras.
klickDenna händelse utlöses när användaren klickar på kartan, det är viktigt att nämna att den utesluter klick på markörer eller informationsfönster.
dragDenna händelse avfyras upprepade gånger när användaren drar med kartan.
mus flyttaDenna händelse avfyras när användaren flyttar musen var som helst i kartbehållaren.
HögerklickaDenna händelse aktiveras när DOM -snabbmenyhändelsen avfyras.
zoom_förändradDenna händelse aktiveras när zoomegenskapen på kartan ändras.
Det är viktigt att nämna att även om dessa händelser kan se ut som standardhändelserna för SOL de är inte, de är en del av Google Maps API. Detta för att undvika problemet där webbläsare hanterar olika typer av händelser för SOL.
Har redan sett de händelser som mest används av API Låt oss gå till träning för att demonstrera användningen av dem vid skapandet av våra kartor, det första exemplet på denna handledning kommer att fokuseras på händelser relaterade till förändringen av kartegenskaper, vilket gör att vi kan få en synkroniserad kartfunktion, det vill säga , har kartor med olika baser som visar samma information oavsett förändringar i deras centrum eller i deras zoom.
Låt oss se stegen vi måste följa för att uppnå detta mål:
1- Först skapar vi en ny fil som vi kommer att kalla synchronized_maps.html och vi genomför inkluderingen av API, tillsammans med de stilar som behållaren för våra kartor kommer att ha, är det viktigt att definiera de globala variablerna på kartorna eftersom vi kommer att behöva använda dem i hela programmets omfattning:

 var map1, map2; 

2- Som vi nämnde tidigare kommer vi att synkronisera två kartor med olika baser, för detta måste vi skapa två funktioner som initierar dem. Dessa funktioner kommer att vara ganska lika de som vi har bemästrat i tidigare självstudier, men de kommer att hantera händelser för att uppnå synkroniseringsfunktionen, låt oss se koden för den första funktionen:

 funktion 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 = nytt 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 ());}); } 

Som vi kan se har vi på vår karta som vanligt att definiera mitten, zoomen och basen, vilket i detta fall är VÄGKARTA, sedan ställer vi in ​​alternativen för vår karta och slutligen våra händelser som är ansvariga för att erhålla värdena för egenskaperna för kartnummer 1 och ställa in dem på kartnummer 2, för detta kommer vi att använda händelserna i center_changed Y zoom_förändrad det är det som gör att vi kan synkronisera.
3- Då måste vi skapa vår funktion för att initiera den andra kartan, koden liknar den föregående, men händelserna kommer att skjutas från karta nummer 2 till nummer 1 och basen blir HYBRID för att visa skillnaden mellan båda:

 funktion 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 = nytt 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- Slutligen skapar vi en funktion för att instansera kartorna som gör att vi kan göra förekomsten av båda, vi bygger vår HTML och vi sätter samma klass till divs som kommer att innehålla våra kartor:

 funktion initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (fönster, 'ladda', initiera mappar); Synkroniserade kartor 

Låt oss se hur våra synkroniserade kartor ser ut när vi kör vår övning i webbläsaren:

FÖRSTORA

Det är viktigt att nämna att de ändringar vi gör på en karta kommer att återspeglas i den andra och vice versa, låt oss se hur det ser ut efter att vi har ändrat egenskapen för mitten och zooma, eftersom de förblir exakt desamma förutom basen :

FÖRSTORA

En av de mest populära och mångsidiga händelserna som vi kan hitta är användningen av musen som en enhet för att mata in information och interagera med olika delar av vårt gränssnitt, i kartorna är det inte annorlunda, vi kan använda det för att utlösa olika händelser enligt för att använda den, i det här exemplet kommer vi att använda klickhändelsen för att få koordinaterna för den specifika punkten, låt oss se stegen att följa:
1- Vi skapar en ny fil som heter get_coordinates.html och vi inkluderar vårt API tillsammans med stilarna:

2- Då skapar vi funktionen initializeMap () som vanligt men detta kommer att ha något annat och är definitionen av händelsen klick i addListener Tillsammans med implementeringen av en dialog som ger oss information om latitud och longitud för var vi klickar, låt oss se:

 google.maps.event.addListener (karta, 'klick', funktion (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Muskoordinater: 
Latitud: ' + e.latLng.lat () +'
Längd: '+ e.latLng.lng (), position: e.latLng}); infowindow.open (karta); }); 

3- Äntligen bygger vi vår HTML och vi definierar vår behållare för kartan:

 Skaffa koordinater med musklick

När vår kod är klar, låt oss se hur vår karta ser ut i vår webbläsare när vi klickar på den och latitud- och longitudinformationen för den punkten visas:

FÖRSTORA

Vi har redan sett att vi kan få en punkts latitud och longitud med bara ett musklick, men detta är kanske inte det mest exakta för att få denna information, så vi kan implementera en lösning som gör att vi kan visualisera latitud och längden på någon punkt genom vilken vi passerar muspekaren, låt oss se:
1- Vi inkluderar vårt API och skapar våra stilar för vår karta och för kontrollen som kommer att ansvara för att visa information om latitud och longitud:

2- Vi skapar vår funktion initializeMap () som i tidigare övningar och vi definierar parametrarna för vår kontroll där vi initierar den med koordinaterna 0.00 / 0.00:

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

3- Då behöver vi skapa kontrollen och lägga till den på vår karta, vi gör det här med google.controls, där vi kan ange i vilken position det kommer att vara, i det här fallet kommer vi att använda RIGHT_BOTTOM som motsvarar i den nedre högra delen och behållaren där den ska visas:

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

4- Slutligen definierar vi vårt evenemang som kommer att vara av typ mus flytta och det kommer att injicera texten för kontrollen av informationen som vi får:

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

Låt oss se hur vår karta ser ut med kontrollen för att få information om latitud och longitud:

FÖRSTORA

För att avsluta låt oss se ett lite mer komplext exempel, där vi inte bara kommer att använda händelser utan också vektorer och en kontextuell meny för att ge användaren ett sätt att kommunicera med vår karta på ett mer organiserat och direkt sätt, låt oss se stegen att följa för att uppnå vårt mål:
1- Vi skapar en fil som heter menu_contextual.html och vi inkluderar Google Maps Javascript API, vi skapar också stilarna för vår karta och kontextmeny:

2- Innan vi skapar vår funktion initializeMap () Vi måste utföra några ytterligare steg, ett av dem är att skapa funktionen för att definiera klassen för snabbmenyn, låt oss se:

 funktionsmenyContextual (karta) {this.setMap (karta); detta.map = karta; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 

3- När detta är gjort måste vi skapa alternativen för vår kontextmeny och lägga till händelsen som kommer att avfyra var och en av dessa när det väljs, vilket vi föreställer oss kommer att vara klick:

 menuContextual.prototype = ny google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'snabbmeny'; this.menuDiv.innerHTML = 'Skapa bokmärke
Zoom
Ångra zoom
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 

4- För att avsluta med vår kontextmeny behöver vi bara lägga till showen och dölja åtgärder, låt oss se hur vår del av koden ser ut för detta:

 menuContextual.prototype.show = function (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (coord); var vänster = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'block'; this.menuDiv.style.left = vänster + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'synlig'; }; menuContextual.prototype.hide = function (x, y) {this.menuDiv.style.visibility = 'hidden'; } 

5- Efter att ha avslutat vår kontextmeny behöver vi bara programmera funktionerna för alternativen i vår meny, som är att zooma, ångra zoom och placera en markör:

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

6- Slutligen initierar vi vår karta, där det viktiga här är att skapa kontextuell meny för vår karta och definiera huvudhändelsen Högerklicka som utlöses med högerklick när du trycker på:

 contextMenu = ny menyContextual (karta); google.maps.event.addListener (map, 'rightclick', function (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 

7- Vi skapar vårt HTML på det konventionella sättet och kör vårt exempel, låt oss se hur vår snabbmeny ser ut när vi högerklickar på vår karta:

FÖRSTORA

Låt oss nu prova alternativen i vår kontextmeny, placera några markörer och leka med zoomningen på vår karta, låt oss se:

FÖRSTORA

Med detta sista exempel avslutar vi denna handledning, efter att ha lärt oss att hantera händelserna i Google Maps Javascript API för att uppnå funktioner som ökar användarupplevelsen i de kartor som vi skapar, kombinerar avancerade tekniker för att uppnå utökade och komplexa funktioner som gör att vår karta sticker ut på alla webbplatser som implementeras.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng