✅ Begivenhedshåndtering i Google Maps

Indholdsfortegnelse

Det Google Maps Javascript API Det er ekstremt kraftfuldt, da det ikke kun tillader oprettelse af kortene som sådan, men vi kan gå et skridt videre ved at udvide dets funktionaliteter og bruge vektorer til at tilføje interessepunkter, rullelister, linjer og rutesimulering.
En anden af styrkerne ved de kort, vi implementerer, og hvis vi nogensinde har arbejdet med Javascript, er begivenheder, som er kernen i sproget og har ansvaret for at styre brugerens interaktion med webstedet, i dette specifikke tilfælde interaktionen med vores kort.
Inden vi går i praksis, skal vi først kende nogle af teorien bag de begivenheder, der håndteres af API'en, dette bruger navneområdet google.maps.event at arbejde med dem. Det har statiske metoder til at lytte til de begivenheder, der er defineret i API'et og controlleren af addListener () at registrere dem.
Ved at kende dette, lad os se nogle af de vigtigste begivenheder, der er tilgængelige i API'en, og som vi vil bruge i vores eksempler:
center_ændretDenne hændelse udløses, når egenskaben for midten af kortet ændres.
klikDenne begivenhed udløses, når brugeren klikker på kortet, det er vigtigt at nævne, at den udelukker klik på markører eller informationsvinduer.
trækDenne hændelse udløses gentagne gange, når brugeren trækker kortet.
museflytDenne hændelse udløses, når brugeren flytter musen overalt i kortbeholderen.
HøjreklikDenne hændelse udløses, når DOM -kontekstmenuhændelsen udløses.
zoom_ændretDenne hændelse udløses, når zoomegenskaben på kortet ændres.
Det er vigtigt at nævne, at selvom disse begivenheder kan ligne standardbegivenhederne i SOL de er ikke, de er en del af Google Maps API. Dette for at undgå problemet, hvor browsere håndterer forskellige typer begivenheder for SOL.
Efter allerede at have set de begivenheder, der blev mest brugt af API Lad os gå til praksis for at demonstrere brugen af dem ved oprettelsen af vores kort, det første eksempel på denne vejledning vil være fokuseret på begivenheder relateret til ændringen af kortegenskaber, hvilket giver os mulighed for at opnå en synkroniseret kortfunktion, dvs. , har kort med forskellige baser, der viser de samme oplysninger uanset ændringer i deres center eller i deres zoom.
Lad os se de trin, vi skal følge for at nå dette mål:
1- Først opretter vi en ny fil, som vi vil kalde synchronized_maps.html og vi udfører inkluderingen af API sammen med de stilarter, containeren på vores kort vil have, er det vigtigt at definere de globale variabler på kortene, da vi bliver nødt til at bruge dem i hele programmets omfang:

 var map1, map2;

2- Som vi nævnte før, skal vi synkronisere to kort med forskellige baser, til dette skal vi oprette to funktioner, der initialiserer dem. Disse funktioner ligner dem, vi har mestret i tidligere selvstudier, men de vil have håndtering af hændelser for at opnå synkroniseringsfunktionen, lad os se koden for den første funktion:

 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 = nyt google.maps.Map (mapElement, mapOptions); google.maps.event.addListener (map1, 'center_changed', function () {map2.setCenter (map1.getCenter ());}); google.maps.event.addListener (map1, 'zoom_changed', funktion () {map2.setZoom (map1.getZoom ());}); }

Som vi kan se, har vi mulighederne på vores kort som normalt for at definere midten, zoomen og basen, som i dette tilfælde er ROADMAP, så sætter vi mulighederne til vores kort og endelig vores begivenheder, der er ansvarlige for at opnå værdierne for egenskaberne for kortnummer 1 og indstille dem på kortnummer 2, til dette vil vi bruge begivenhederne i center_ændret Y zoom_ændret det er det, der giver os mulighed for at synkronisere.
3- Så er vi nødt til at oprette vores funktion for at initialisere det andet kort, koden ligner den forrige, men hændelserne vil blive affyret fra kort nummer 2 til nummer 1, og basen vil være HYBRID for at vise forskellen mellem begge:

 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 = nyt 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- Endelig opretter vi en funktion til at instantiere kortene, som giver os mulighed for at lave forekomsten af begge, vi bygger vores HTML og vi sætter den samme klasse til de divs, der vil indeholde vores kort:

 funktion initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (vindue, 'load', initializeMaps); Synkroniserede kort

Lad os se, hvordan vores synkroniserede kort ser ud, når vi kører vores øvelse i browseren:

FORSTØRRE

Det er vigtigt at nævne, at de ændringer, vi foretager i det ene kort, vil afspejle sig i det andet og omvendt, lad os se, hvordan det ser ud, efter at vi har ændret egenskaben for midten og zoomet, da de forbliver nøjagtig de samme bortset fra basen :

FORSTØRRE

En af de mest populære og alsidige begivenheder, vi kan finde, er brugen af musen som en enhed til indtastning af information og interaktion med forskellige elementer i vores grænseflade, i kortene er det ikke anderledes, vi kan bruge det til at udløse forskellige hændelser i henhold til til brugen af det, i dette eksempel vil vi bruge klikhændelsen til at hente koordinaterne for det specifikke punkt, lad os se trinene, der skal følges:
1- Vi opretter en ny fil kaldet get_coordinates.html og vi inkluderer vores API sammen med stilarterne:

2- Så opretter vi funktionen initializeMap () som sædvanligt, men dette vil have noget andet og er definitionen af begivenheden klik i addListener sammen med implementeringen af en dialog, der giver os oplysninger om breddegrad og længdegrad, hvor vi klikker, lad os se:

 google.maps.event.addListener (kort, 'klik', funktion (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({indhold: 'Muskoordinater: 
Breddegrad: ' + e.latLng.lat () +'
Længde: '+ e.latLng.lng (), position: e.latLng}); infowindow.open (kort); });

3- Endelig bygger vi vores HTML og vi definerer vores container til kortet:

 Opnåelse af koordinater med museklik

Når vores kode er færdig, lad os se, hvordan vores kort ser ud i vores browser, når vi klikker på det, og oplysninger om breddegrad og længdegrad for dette punkt vises:

FORSTØRRE

Vi har allerede set, at vi kan få et punkts breddegrad og længdegrad med blot et klik med musen, men dette er muligvis ikke det mest nøjagtige for at få disse oplysninger, så vi kan implementere en løsning, der giver os mulighed for at visualisere breddegraden og længdegrad for ethvert punkt, hvorigennem vi passerer musens markør, lad os se:
1- Vi inkluderer vores API og opretter vores stilarter til vores kort og til den kontrol, der har ansvaret for at vise oplysninger om breddegrad og længdegrad:

2- Vi skaber vores funktion initializeMap () som i tidligere øvelser, og vi definerer parametrene for vores kontrol, hvor vi initialiserer det med koordinaterne 0.00 / 0.00:

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

3- Så skal vi oprette kontrollen og tilføje den til vores kort, vi gør dette med google.controls, hvor vi kan angive den position, det vil være i, i dette tilfælde vil vi bruge RIGHT_BOTTOM som svarer i nederste højre del og beholderen, hvor den skal vises:

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

4- Endelig definerer vi vores begivenhed, som vil være af typen museflyt og det vil injicere teksten til kontrol af de oplysninger, vi får:

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

Lad os se, hvordan vores kort ser ud med kontrollen for at få oplysninger om breddegrad og længdegrad:

FORSTØRRE

For at afslutte, lad os se et lidt mere komplekst eksempel, hvor vi ikke kun vil bruge begivenheder, men også vektorer og en kontekstuel menu til at give brugeren en måde at kommunikere med vores kort på en mere organiseret og direkte måde, lad os se trinene til at følge nå vores mål:
1- Vi opretter en fil kaldet menu_kontekstuel.html og vi inkluderer Google Maps Javascript API, vi opretter også stilarterne til vores kort og kontekstmenu:

2- Inden vi opretter vores funktion initializeMap () Vi skal udføre et par ekstra trin, et af dem er at oprette funktionen til at definere klassen til kontekstmenuen, lad os se:

 funktionsmenuContextual (kort) {this.setMap (kort); dette.map = kort; this.mapDiv = map.getDiv (); this.menuDiv = null; };

3- Når dette er gjort, skal vi oprette mulighederne for vores kontekstuelle menu og tilføje den begivenhed, der vil affyre hver af disse, når den vælges, hvilket som vi forestiller os vil være klik:

 menuContextual.prototype = ny google.maps.OverlayView (); menuContextual.prototype.draw = funktion () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'kontekstmenu'; this.menuDiv.innerHTML = 'Opret bogmærke
Zoom
Fortryd zoom
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (dette.map, 'klik', funktion (mouseEvent) {that.hide ();}); };

4- For at afslutte med vores kontekstmenu behøver vi kun at tilføje showet og skjule handlinger, lad os se, hvordan vores del af koden ser ud 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 = 'blok'; this.menuDiv.style.left = venstre + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'synlig'; }; menuContextual.prototype.hide = funktion (x, y) {this.menuDiv.style.visibility = 'skjult'; }

5- Når vi er færdige med vores kontekstuelle menu, behøver vi kun at programmere funktionerne for valgmulighederne i vores menu, som skal zoome, fortryde zoom og placere en markør:

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

6- Endelig initialiserer vi vores kort, hvor det vigtige her er at oprette kontekstuel menu for vores kort og definere hovedbegivenheden Højreklik som udløses af højre museklik, når der trykkes på:

 contextMenu = ny menuContextual (kort); google.maps.event.addListener (kort, 'højreklik', funktion (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);});

7- Vi skaber vores HTML på den konventionelle måde og køre vores eksempel, lad os se, hvordan vores kontekstmenu ser ud, når vi højreklikker på vores kort:

FORSTØRRE

Lad os nu prøve mulighederne i vores kontekstuelle menu, placere nogle markører og lege med zoom på vores kort, lad os se:

FORSTØRRE

Med dette sidste eksempel afslutter vi denne tutorial, efter at have lært at håndtere begivenhederne i Google Maps Javascript API at opnå funktionaliteter, der øger brugeroplevelsen i de kort, vi opretter, og kombinerer avancerede teknikker til at opnå udvidede og komplekse funktionaliteter, der får vores kort til at skille sig ud på ethvert websted, der er implementeret.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt