Inhoudsopgave
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
VERGROTEN
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
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
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
VERGROTEN
