Hendelseshåndtering i Google Maps

De Google Maps Javascript API Det er ekstremt kraftig siden det ikke bare tillater opprettelse av kartene som sådan, men vi kan gå et skritt videre ved å utvide funksjonalitetene og bruke vektorer til å legge til interessante steder, nedtrekksvinduer, linjer og rutesimulering.
En annen av styrkene til kartene vi implementerer, og hvis vi noen gang har jobbet med Javascript, er arrangementer, som er kjernen i språket og har ansvaret for å administrere brukerens interaksjon med nettstedet, i dette spesifikke tilfellet interaksjonen med kartet vårt.
Før vi går på trening må vi først kjenne noen av teorien bak hendelsene som håndteres av API, dette bruker navneområdet google.maps.event å jobbe med dem. Den har statiske metoder for å lytte til hendelsene som er definert i API og kontrolleren til addListener () å registrere dem.
Når vi vet dette, la oss se noen av de viktigste hendelsene som er tilgjengelige i API, og som vi vil bruke i eksemplene våre:
sentrum_endretDenne hendelsen utløses når egenskapen til midten av kartet endres.
klikkDenne hendelsen utløses når brukeren klikker på kartet, det er viktig å nevne at den utelukker klikk på markører eller informasjonsvinduer.
draDenne hendelsen utløses gjentatte ganger når brukeren drar kartet.
musebevegelseDenne hendelsen utløses når brukeren flytter musen hvor som helst i kartbeholderen.
HøyreklikkDenne hendelsen utløses når DOM -kontekstmenyhendelsen utløses.
zoom_endretDenne hendelsen utløses når zoomegenskapen til kartet endres.
Det er viktig å nevne at selv om disse hendelsene kan se ut som standardhendelsene til SOL de er ikke, de er en del av Google Maps API. Dette for å unngå problemet der nettlesere håndterer forskjellige typer hendelser for SOL.
Etter å allerede ha sett hendelsene som ble mest brukt av API La oss gå til praksis for å demonstrere bruken av dem ved opprettelsen av kartene våre, det første eksemplet på denne opplæringen vil være fokusert på hendelser knyttet til endring av kartegenskaper, som vil tillate oss å få en synkronisert kartfunksjonalitet, det vil si , har kart med forskjellige baser som viser den samme informasjonen uavhengig av endringer i midten eller i zoom.
La oss se trinnene vi må følge for å nå dette målet:
1- Først lager vi en ny fil som vi vil kalle synchronized_maps.html og vi utfører inkluderingen av API -en, sammen med stilene som beholderen til kartene våre vil ha, er det viktig å definere de globale variablene på kartene siden vi må bruke dem gjennom hele programmets omfang:

 var map1, map2; 

2- Som vi nevnte før, skal vi synkronisere to kart med forskjellige baser, for dette må vi lage to funksjoner som initialiserer dem. Disse funksjonene vil være ganske like de vi har mestret i tidligere opplæringsprogrammer, men de vil ha håndtering av hendelser for å oppnå synkroniseringsfunksjonaliteten, la oss se koden til den første funksjonen:

 funksjon 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 alternativene på kartet vårt som vanlig for å definere sentrum, zoomen og basen, som i dette tilfellet er VEIKART, så setter vi alternativene til kartet vårt og til slutt hendelsene våre som er ansvarlige for å skaffe verdiene til egenskapene til kartnummer 1 og sette dem på kartnummer 2, for dette vil vi bruke hendelsene til sentrum_endret Y zoom_endret Det er dette som lar oss synkronisere.
3- Da må vi lage vår funksjon for å initialisere det andre kartet, koden ligner den forrige, men hendelsene vil utløses fra kart nummer 2 til nummer 1 og basen vil være HYBRID for å vise forskjellen mellom begge:

 funksjon 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- Til slutt lager vi en funksjon for å instantiere kartene som lar oss lage forekomsten av begge, vi bygger vår HTML og vi setter samme klasse til divsene som vil inneholde kartene våre:

 funksjon initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (vindu, "last", initialiser kart); Synkroniserte kart 

La oss se hvordan de synkroniserte kartene våre ser ut når vi kjører øvelsen i nettleseren:

FORSTØRRE

Det er viktig å nevne at endringene vi gjør på det ene kartet vil gjenspeiles i det andre og omvendt, la oss se hvordan det ser ut etter at vi har endret egenskapen til sentrum og zoome, da de forblir nøyaktig de samme bortsett fra basen :

FORSTØRRE

En av de mest populære og allsidige hendelsene vi kan finne er bruk av musen som en enhet for å legge inn informasjon og samhandle med forskjellige elementer i grensesnittet vårt, på kartene er det ikke annerledes, vi kan bruke det til å utløse forskjellige hendelser i henhold til til bruk av det, i dette eksemplet vil vi bruke klikkhendelsen for å få koordinatene til det spesifikke punktet, la oss se trinnene som skal følges:
1- Vi lager en ny fil som heter get_coordinates.html og vi inkluderer vårt API sammen med stilene:

2- Så lager vi funksjonen initializeMap () som vanlig, men dette vil ha noe annet og er definisjonen av hendelsen klikk i addListener sammen med implementeringen av en dialog som vil gi oss informasjon om breddegrad og lengdegrad der vi klikker, la oss se:

 google.maps.event.addListener (kart, 'klikk', funksjon (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Muskoordinater: 
Breddegrad: ' + e.latLng.lat () +'
Lengde: '+ e.latLng.lng (), posisjon: e.latLng}); infowindow.open (kart); }); 

3- Endelig bygger vi vårt HTML og vi definerer beholderen vår for kartet:

 Oppnå koordinater med museklikk

Når koden er ferdig, la oss se hvordan kartet vårt ser ut i nettleseren vår når vi klikker på den, og bredde- og lengdegradinformasjonen for det punktet vises:

FORSTØRRE

Vi har allerede sett at vi kan få breddegrad og lengdegrad for et punkt med bare et klikk med musen, men dette er kanskje ikke det mest nøyaktige for å få denne informasjonen, så vi kan implementere en løsning som lar oss visualisere breddegraden og lengdegrad for et hvilket som helst punkt vi passerer musepekeren gjennom, la oss se:
1- Vi inkluderer vårt API og lager våre stiler for kartet vårt og for kontrollen som skal ha ansvaret for å vise breddegrad og lengdegradinformasjon:

2- Vi skaper vår funksjon initializeMap () som i tidligere øvelser, og vi definerer parametrene for vår kontroll der vi initialiserer den med koordinatene 0.00 / 0.00:

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

3- Da må vi lage kontrollen og legge den til på kartet vårt, vi gjør dette med google.controls, hvor vi kan spesifisere posisjonen det vil være i, i dette tilfellet vil vi bruke RIGHT_BOTTOM som tilsvarer i nedre høyre del og beholderen der den skal vises:

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

4- Til slutt definerer vi arrangementet vårt som vil være av typen musebevegelse og det vil injisere teksten til kontrollen av informasjonen vi får:

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

La oss se hvordan kartet vårt ser ut med kontrollen for å få informasjon om breddegrad og lengdegrad:

FORSTØRRE

For å fullføre, la oss se et litt mer komplekst eksempel, hvor vi ikke bare vil bruke hendelser, men også vektorer og en kontekstuell meny for å gi brukeren en måte å kommunisere med kartet vårt på en mer organisert og direkte måte. La oss se trinnene som skal følges for å nå målet vårt:
1- Vi lager en fil som heter menu_contextual.html og vi inkluderer Google Maps Javascript API, vi lager også stilene for kartet og kontekstuelle meny:

2- Før du lager vår funksjon initializeMap () Vi må utføre noen ekstra trinn, et av dem er å lage funksjonen for å definere klassen for hurtigmenyen, la oss se:

 funksjonsmenyContextual (kart) {this.setMap (kart); dette.map = kart; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 

3- Når dette er gjort, må vi lage alternativene for vår kontekstuelle meny og legge til hendelsen som vil utløse hver av disse når de er valgt, noe som vi forestiller oss vil være klikk:

 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 = 'kontekstmeny'; this.menuDiv.innerHTML = 'Lag bokmerke
Zoom
Angre zoom
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (dette.map, 'klikk', funksjon (mouseEvent) {that.hide ();}); }; 

4- For å avslutte med vår kontekstuelle meny trenger vi bare å legge til showet og skjule handlinger, la oss se hvordan vår del av koden ser ut for dette:

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

5- Etter å ha fullført vår kontekstuelle meny, trenger vi bare å programmere funksjonene for alternativene i menyen vår, som er å zoome, angre zoom og plassere en markør:

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

6- Til slutt initialiserer vi kartet vårt, der det viktige her er å lage kontekstuell meny for kartet vårt og definere hovedhendelsen Høyreklikk som vil utløses av høyre museklikk når du trykker på:

 contextMenu = ny menyContextual (kart); google.maps.event.addListener (kart, 'høyreklikk', funksjon (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 

7- Vi lager vårt HTML på den konvensjonelle måten og kjøre vårt eksempel, la oss se hvordan kontekstmenyen vår ser ut når vi høyreklikker på kartet vårt:

FORSTØRRE

La oss nå prøve alternativene i vår kontekstuelle meny, plassere noen markører og leke med zoom på kartet vårt, la oss se:

FORSTØRRE

Med dette siste eksemplet avslutter vi denne opplæringen, etter å ha lært å håndtere hendelsene i Google Maps Javascript API for å oppnå funksjoner som øker brukeropplevelsen på kartene vi lager, og kombinerer avanserte teknikker for å oppnå utvidede og komplekse funksjoner som får kartet vårt til å skille seg ut på alle nettsteder som er implementert.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng