Afhandeling van gebeurtenissen in Google Maps

De Google Maps Javascript-API Het is buitengewoon krachtig omdat het niet alleen de creatie van de kaarten als zodanig mogelijk maakt, maar we kunnen nog een stap verder gaan door de functionaliteiten uit te breiden en vectoren te gebruiken om interessante punten, vervolgkeuzevensters, lijnen en routesimulatie toe te voegen.
Een ander sterk punt van de kaarten die we implementeren en als we ooit met Javascript hebben gewerkt, zijn de evenementen, die de kern van de taal vormen en verantwoordelijk zijn voor het beheer van de interactie van de gebruiker met de website, in dit specifieke geval de interactie met onze kaart.
Voordat we gaan oefenen, moeten we eerst een deel van de theorie kennen achter de gebeurtenissen die door de API worden afgehandeld, dit maakt gebruik van de naamruimte google.maps.event om met hen te werken. Het heeft statische methoden om te luisteren naar de gebeurtenissen die zijn gedefinieerd in de API en de controller van addListener () om ze te registreren.
Dit wetende, laten we eens kijken naar enkele van de belangrijkste gebeurtenissen die beschikbaar zijn in de API en die we zullen gebruiken in onze voorbeelden:
center_changedDeze gebeurtenis wordt geactiveerd wanneer de eigenschap van het midden van de kaart verandert.
KlikDeze gebeurtenis wordt geactiveerd wanneer de gebruiker op de kaart klikt, het is belangrijk om te vermelden dat klikken op markeringen of informatievensters wordt uitgesloten.
sleurenDeze gebeurtenis wordt herhaaldelijk geactiveerd wanneer de gebruiker de kaart sleept.
muisbewegingDeze gebeurtenis wordt geactiveerd wanneer de gebruiker zijn muis ergens in de kaartcontainer beweegt.
klik met de rechtermuisknopDeze gebeurtenis wordt geactiveerd wanneer de gebeurtenis in het DOM-contextmenu wordt geactiveerd.
zoom_changedDeze gebeurtenis wordt geactiveerd wanneer de zoomeigenschap van de kaart verandert.
Het is belangrijk om te vermelden dat hoewel deze evenementen eruit kunnen zien als de standaardevenementen van de ZON dat zijn ze niet, ze maken deel uit van de Google Maps-API. Dit om het probleem te vermijden waarbij browsers verschillende soorten gebeurtenissen afhandelen voor de ZON.
Ik heb al de evenementen gezien die het meest worden gebruikt door de API Laten we gaan oefenen om het gebruik ervan te demonstreren bij het maken van onze kaarten, het eerste voorbeeld van deze tutorial zal gericht zijn op gebeurtenissen met betrekking tot de verandering van kaarteigenschappen, waardoor we een gesynchroniseerde kaartfunctionaliteit kunnen verkrijgen, dat wil zeggen, , hebben kaarten met verschillende bases die dezelfde informatie tonen, ongeacht de veranderingen in hun centrum of in hun zoom.
Laten we eens kijken welke stappen we moeten volgen om dit doel te bereiken:
1- Eerst maken we een nieuw bestand dat we zullen noemen gesynchroniseerde_maps.html en we voeren de opname van de API uit, samen met de stijlen die de container van onze kaarten zal hebben, is het belangrijk om de globale variabelen van de kaarten te definiëren, omdat we ze binnen de reikwijdte van het programma zullen moeten gebruiken:

 var kaart1, kaart2; 

2- Zoals we eerder vermeldden, gaan we twee kaarten met verschillende bases synchroniseren, hiervoor moeten we twee functies maken die ze initialiseren. Deze functies zullen vrij gelijkaardig zijn aan de functies die we in eerdere tutorials onder de knie hebben, maar ze zullen de afhandeling van gebeurtenissen hebben om de synchronisatiefunctionaliteit te bereiken, laten we de code van de eerste functie eens bekijken:

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

Zoals we kunnen zien, hebben we zoals gewoonlijk de opties van onze kaart om het centrum, de zoom en de basis te definiëren, wat in dit geval is STAPPENKAART, dan stellen we de opties in op onze kaart en ten slotte onze evenementen die verantwoordelijk zijn voor het verkrijgen van de waarden van de eigenschappen van kaart nummer 1 en deze instellen op kaart nummer 2, hiervoor zullen we de evenementen van gebruiken center_changed Y zoom_changed dit is wat ons in staat stelt om te synchroniseren.
3- Vervolgens moeten we onze functie maken om de tweede kaart te initialiseren, de code is vergelijkbaar met de vorige, maar de gebeurtenissen worden geactiveerd van kaartnummer 2 naar nummer 1 en de basis wordt HYBRIDE om het verschil tussen beide te laten zien:

 functie 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 = nieuwe 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- Ten slotte maken we een functie om de kaarten te instantiëren waarmee we de instantie van beide kunnen maken, we bouwen onze HTML en we plaatsen dezelfde klasse in de divs die onze kaarten zullen bevatten:

 functie initializeMaps () {initializeMap1 (); initialiseerMap2 (); } google.maps.event.addDomListener (venster, 'laden', initializeMaps); Gesynchroniseerde kaarten 

Laten we eens kijken hoe onze gesynchroniseerde kaarten eruit zien wanneer we onze oefening in de browser uitvoeren:

VERGROTEN

Het is belangrijk om te vermelden dat de wijzigingen die we in de ene kaart aanbrengen, worden weerspiegeld in de andere en vice versa, laten we eens kijken hoe het eruit ziet nadat we de eigenschap van het centrum en zoom hebben gewijzigd, omdat ze precies hetzelfde blijven, behalve de basis :

VERGROTEN

Een van de meest populaire en veelzijdige evenementen die we kunnen vinden, is het gebruik van de muis als een apparaat voor het invoeren van informatie en interactie met verschillende elementen van onze interface, in de kaarten is het niet anders, we kunnen het gebruiken om verschillende evenementen te activeren volgens om het te gebruiken, zullen we in dit voorbeeld de click-gebeurtenis gebruiken om de coördinaten van dat specifieke punt te verkrijgen, laten we de te volgen stappen bekijken:
1- We maken een nieuw bestand met de naam get_coördinaten.html en we nemen onze API op samen met de stijlen:

2- Dan maken we de functie initializeMap () zoals gewoonlijk, maar dit zal iets anders hebben en is de definitie van het evenement Klik in de addlistener samen met de implementatie van een dialoogvenster dat ons informatie zal geven over de breedtegraad en lengtegraad van waar we klikken, laten we eens kijken:

 google.maps.event.addListener (kaart, 'klik', functie (e) {if (infowindow! = null) infowindow.close (); infowindow = nieuw google.maps.InfoWindow ({content: 'Muis coördinaten: 
Breedtegraad: '+ e.latLng.lat () +'
Lengte: '+ e.latLng.lng (), positie: e.latLng}); infowindow.open (kaart); }); 

3- Eindelijk bouwen we onze HTML en we definiëren onze container voor de kaart:

 Coördinaten verkrijgen met muisklik

Nu onze code is voltooid, laten we eens kijken hoe onze kaart eruitziet in onze browser wanneer we erop klikken en de breedte- en lengtegraadinformatie van dat punt wordt weergegeven:

VERGROTEN

We hebben al gezien dat we de lengte- en breedtegraad van een punt kunnen verkrijgen met slechts een muisklik, maar dit is misschien niet de meest nauwkeurige om deze informatie te verkrijgen, dus we kunnen een oplossing implementeren waarmee we de breedtegraad en lengtegraad van elk punt waardoor we de aanwijzer van onze muis passeren, laten we eens kijken:
1- We nemen onze API op en creëren onze stijlen voor onze kaart en voor de controle die verantwoordelijk is voor het weergeven van de breedte- en lengtegraadinformatie:

2- We creëren onze functie initializeMap () zoals in eerdere oefeningen en we definiëren de parameters voor onze controle waar we deze initialiseren met de coördinaten 0.00 / 0.00:

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

3- Dan moeten we het besturingselement maken en toevoegen aan onze kaart, we doen dit met google.controls, waar we de positie kunnen specificeren waarin het zal zijn, in dit geval zullen we gebruiken RECHTS BENEDEN wat overeenkomt in de rechterbenedenhoek en de container waar het zal worden weergegeven:

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

4- Ten slotte definiëren we ons evenement dat van het type zal zijn muisbeweging en het zal de tekst injecteren in de controle van de informatie die we verkrijgen:

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

Laten we eens kijken hoe onze kaart eruitziet met de besturing om de breedte- en lengtegraadinformatie te verkrijgen:

VERGROTEN

Laten we tot slot een iets complexer voorbeeld bekijken, waarbij we niet alleen gebeurtenissen gebruiken, maar ook vectoren en een contextueel menu om de gebruiker een manier te geven om op een meer georganiseerde en directe manier met onze kaart te communiceren. Laten we de stappen bekijken die moeten worden gevolgd om ons doel bereiken:
1- We maken een bestand met de naam menu_contextueel.html en we omvatten de Google Maps Javascript-API, we creëren ook de stijlen voor onze kaart en contextueel menu:

2- Voordat we onze functie maken initializeMap () We moeten een paar extra stappen uitvoeren, een daarvan is om de functie te maken om de klasse voor het contextmenu te definiëren, laten we eens kijken:

 functiemenuContextueel (kaart) {this.setMap (kaart); deze.kaart = kaart; deze.mapDiv = kaart.getDiv (); dit.menuDiv = null; }; 

3- Zodra dit is gebeurd, moeten we de opties voor ons contextuele menu maken en de gebeurtenis toevoegen die elk van deze zal activeren wanneer ze worden geselecteerd, wat, zoals we ons zullen voorstellen, zal zijn Klik:

 menuContextual.prototype = nieuwe google.maps.OverlayView (); menuContextual.prototype.draw = functie () {}; menuContextual.prototype.onAdd = functie () {var dat = dit; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'contextmenu'; this.menuDiv.innerHTML = 'Bladwijzer maken'
Zoom
Zoom ongedaan maken
'; this.getPanes ().floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 

4- Om te eindigen met ons contextuele menu, hoeven we alleen de acties tonen en verbergen toe te voegen, laten we eens kijken hoe ons gedeelte van de code eruitziet:

 menuContextual.prototype.show = functie (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (coord); var left = Math.floor (mouseCoords.x); var top = Math.floor (muisCoords.y); this.menuDiv.style.display = 'blokkeren'; this.menuDiv.style.left = left + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'zichtbaar'; }; menuContextual.prototype.hide = functie (x, y) {this.menuDiv.style.visibility = 'verborgen'; } 

5- Nu we klaar zijn met ons contextuele menu, hoeven we alleen de functies voor de opties in ons menu te programmeren, namelijk zoomen, zoom ongedaan maken en een markering plaatsen:

 functie doZoom () {map.setZoom (map.getZoom () + 1); } functie undoZoom () {map.setZoom (map.getZoom () - 1); } functie createMarker () {var marker = nieuwe google.maps.Marker ({positie: lastCoordinate, kaart: kaart, titel: 'Random Marker'}); } 

6- Ten slotte initialiseren we onze kaart, waarbij het belangrijkste hier is om de contextueel menu voor onze kaart en definieer het hoofdevenement klik met de rechtermuisknop die wordt geactiveerd door de rechtermuisknop wanneer erop wordt gedrukt:

 contextMenu = nieuw menuContextueel (kaart); google.maps.event.addListener (kaart, 'rechts klikken', functie (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 

7- Wij maken onze HTML op de conventionele manier en voer ons voorbeeld uit, laten we eens kijken hoe ons contextmenu eruit ziet als we met de rechtermuisknop op onze kaart klikken:

VERGROTEN

Laten we nu de opties van ons contextuele menu proberen, enkele markeringen plaatsen en spelen met de zoom van onze kaart, laten we eens kijken:

VERGROTEN

Met dit laatste voorbeeld beëindigen we deze tutorial, nadat we hebben geleerd om te gaan met de gebeurtenissen van de Google Maps Javascript-API om functionaliteiten te bereiken die de gebruikerservaring verhogen in de kaarten die we maken, waarbij geavanceerde technieken worden gecombineerd om uitgebreide en complexe functionaliteiten te bereiken waardoor onze kaart opvalt op elke website die wordt geïmplementeerd.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven