Inhaltsverzeichnis
Das JavaScript-API von Google Maps Es ist äußerst leistungsfähig, da es nicht nur die Erstellung der Karten als solche ermöglicht, sondern wir können noch einen Schritt weiter gehen, indem wir seine Funktionalitäten erweitern und Vektoren verwenden, um Points of Interest, Dropdown-Fenster, Linien und Routensimulation hinzuzufügen.Eine weitere Stärke der von uns implementierten Karten und wenn wir jemals mit Javascript gearbeitet haben, sind die Veranstaltungen, die den Kern der Sprache bilden und für die Verwaltung der Interaktion des Benutzers mit der Website verantwortlich sind, in diesem speziellen Fall die Interaktion mit unserer Karte.
Bevor wir mit der Praxis beginnen, müssen wir zunächst einige der Theorien hinter den Ereignissen kennen, die von der API verarbeitet werden. Dies verwendet den Namensraum google.maps.event mit ihnen zu arbeiten. Es verfügt über statische Methoden, um die in der API und dem Controller von . definierten Ereignisse abzuhören addListener () um sie zu registrieren.
Wenn wir dies wissen, sehen wir uns einige der wichtigsten Ereignisse an, die in der API verfügbar sind und die wir in unseren Beispielen verwenden werden:
center_changedDieses Ereignis wird ausgelöst, wenn sich die Eigenschaft der Kartenmitte ändert.
klickenDieses Ereignis wird ausgelöst, wenn der Benutzer auf die Karte klickt, es ist wichtig zu erwähnen, dass es Klicks auf Markierungen oder Informationsfenster ausschließt.
ziehenDieses Ereignis wird wiederholt ausgelöst, wenn der Benutzer die Karte zieht.
MausbewegungDieses Ereignis wird ausgelöst, wenn der Benutzer seine Maus an eine beliebige Stelle im Kartencontainer bewegt.
RechtsklickDieses Ereignis wird ausgelöst, wenn das DOM-Kontextmenüereignis ausgelöst wird.
zoom_changedDieses Ereignis wird ausgelöst, wenn sich die Zoom-Eigenschaft der Karte ändert.
Es ist wichtig zu erwähnen, dass, obwohl diese Veranstaltungen wie die Standardveranstaltungen der SONNE sie sind nicht, sie sind ein Teil der Google Maps-API. Dies, um das Problem zu vermeiden, dass Browser verschiedene Arten von Ereignissen für die SONNE.
Nachdem ich bereits die von den am meisten genutzten Veranstaltungen gesehen habe API Lassen Sie uns in die Praxis gehen, um ihre Verwendung bei der Erstellung unserer Karten zu demonstrieren. Das erste Beispiel dieses Tutorials konzentriert sich auf Ereignisse im Zusammenhang mit der Änderung von Karteneigenschaften, die es uns ermöglichen, eine synchronisierte Kartenfunktionalität zu erhalten, d. , haben Karten mit unterschiedlichen Basen, die unabhängig von Änderungen in ihrer Mitte oder in ihrem Zoom die gleichen Informationen anzeigen.
Sehen wir uns die Schritte an, die wir ausführen müssen, um dieses Ziel zu erreichen:
1- Zuerst erstellen wir eine neue Datei, die wir aufrufen werden synchronisiert_maps.html und wir führen die Integration der API durch, zusammen mit den Stilen, die der Container unserer Karten haben wird, ist es wichtig, die globalen Variablen der Karten zu definieren, da wir sie im gesamten Umfang des Programms verwenden müssen:
var map1, map2;
2- Wie bereits erwähnt, werden wir zwei Karten mit unterschiedlichen Basen synchronisieren, dazu müssen wir zwei Funktionen erstellen, die sie initialisieren. Diese Funktionen werden denen, die wir in früheren Tutorials gemeistert haben, ziemlich ähnlich sein, sie werden jedoch Ereignisse behandeln, um die Synchronisierungsfunktionalität zu erreichen. Sehen wir uns den Code der ersten Funktion an:
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 = new 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 ());}); } Wie wir sehen, haben wir wie gewohnt die Optionen unserer Karte, um den Mittelpunkt, den Zoom und die Basis zu definieren, was in diesem Fall . ist ROADMAP, dann legen wir die Optionen für unsere Karte und schließlich unsere Ereignisse fest, die dafür verantwortlich sind, die Werte der Eigenschaften von Kartennummer 1 zu erhalten und auf Karte Nummer 2 zu setzen, dafür verwenden wir die Ereignisse von center_changed Ja zoom_changed Dies ermöglicht uns die Synchronisation.
3- Dann müssen wir unsere Funktion erstellen, um die zweite Karte zu initialisieren, der Code ist dem vorherigen ähnlich, aber die Ereignisse werden von Karte Nummer 2 bis Nummer 1 ausgelöst und die Basis wird sein HYBRID um den Unterschied zwischen beiden zu zeigen:
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 = neue 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- Schließlich erstellen wir eine Funktion zum Instanziieren der Karten, die es uns ermöglicht, die Instanz von beiden zu erstellen, wir bauen unsere HTML und wir fügen den divs, die unsere Maps enthalten, dieselbe Klasse hinzu:
Funktion initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (window, 'load', initializeMaps); Synchronisierte Karten
Sehen wir uns an, wie unsere synchronisierten Karten aussehen, wenn wir unsere Übung im Browser ausführen:
VERGRÖSSERN
VERGRÖSSERN
1- Wir erstellen eine neue Datei namens get_coordinates.html und wir binden unsere API zusammen mit den Stilen ein:
2- Dann erstellen wir die Funktion initializeMap() wie immer, aber das wird etwas anderes haben und ist die Definition des Ereignisses klicken in dem addListener Zusammen mit der Implementierung eines Dialogs, der uns Informationen über den Breiten- und Längengrad des Ortes liefert, an dem wir klicken, sehen wir uns Folgendes an:
google.maps.event.addListener (map, 'click', function (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Mauskoordinaten:
Breite: '+ e.latLng.lat () +'
Länge: '+ e.latLng.lng (), Position: e.latLng}); infowindow.open (Karte); }); 3- Endlich bauen wir unsere HTML und wir definieren unseren Container für die Karte:
Koordinaten per Mausklick ermitteln
Wenn unser Code fertig ist, sehen wir uns an, wie unsere Karte in unserem Browser aussieht, wenn wir darauf klicken und die Breiten- und Längengradinformationen dieses Punktes angezeigt werden:
VERGRÖSSERN
1- Wir binden unsere API ein und erstellen unsere Stile für unsere Karte und für die Steuerung, die für die Anzeige der Breiten- und Längengradinformationen verantwortlich ist:
2- Wir erstellen unsere Funktion initializeMap() wie in den vorherigen Übungen und wir definieren die Parameter für unsere Steuerung, indem wir sie mit den Koordinaten initialisieren 0.00 / 0.00:
var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Lat / Lng: 0.00 / 0.00'; 3- Dann müssen wir das Steuerelement erstellen und zu unserer Karte hinzufügen, wir tun dies mit google.controls, wo wir die Position angeben können, in der es sein wird, in diesem Fall verwenden wir RECHTS UNTEN was im unteren rechten Teil entspricht und dem Container, in dem es angezeigt wird:
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);
4- Schließlich definieren wir unsere Veranstaltung, die vom Typ sein wird Mausbewegung und es wird den Text der Kontrolle der von uns erhaltenen Informationen unterwerfen:
google.maps.event.addListener (map, 'mousemove', function (e) {var CoordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + '/' + e.latLng. lng().toFixed (6);controlDiv.innerHTML =KoordinatenText;}); Sehen wir uns an, wie unsere Karte mit dem Steuerelement aussieht, um die Breiten- und Längengradinformationen zu erhalten:
VERGRÖSSERN
1- Wir erstellen eine Datei namens menu_contextual.html und wir schließen die ein JavaScript-API von Google Maps, erstellen wir auch die Stile für unsere Karte und unser Kontextmenü:
2- Vor dem Erstellen unserer Funktion initializeMap() Wir müssen ein paar zusätzliche Schritte ausführen, einer davon ist das Erstellen der Funktion zum Definieren der Klasse für das Kontextmenü, mal sehen:
Funktion menuContextual (Karte) {this.setMap (Karte); this.map = Karte; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 3- Sobald dies erledigt ist, müssen wir die Optionen für unser Kontextmenü erstellen und das Ereignis hinzufügen, das bei Auswahl jedes dieser Ereignisse auslöst, was, wie wir uns vorstellen, sein wird klicken:
menuContextual.prototype = new google.maps.OverlayView (); menuContextual.prototype.draw = Funktion () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'Kontextmenü'; this.menuDiv.innerHTML = 'Lesezeichen erstellen
Zoomen
Zoom rückgängig machen
'; this.getPanes() floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide();}); }; 4- Um unser Kontextmenü abzuschließen, müssen wir nur noch die Aktionen zum Ein- und Ausblenden hinzufügen. Sehen wir uns an, wie unser Teil des Codes dafür aussieht:
menuContextual.prototype.show = function (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (coord); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'blockieren'; this.menuDiv.style.left = left + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'sichtbar'; }; menuContextual.prototype.hide = Funktion (x, y) {this.menuDiv.style.visibility = 'versteckt'; } 5- Nachdem wir mit unserem Kontextmenü fertig sind, müssen wir nur noch die Funktionen für die Optionen in unserem Menü programmieren, nämlich Zoomen, Zoomen rückgängig machen und einen Marker setzen:
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- Schließlich initialisieren wir unsere Karte, wobei es hier wichtig ist, die zu erstellen Kontextmenü für unsere Karte und definieren Sie das Hauptereignis Rechtsklick die beim Drücken der rechten Maustaste ausgelöst wird:
contextMenu = new menuContextual (Karte); google.maps.event.addListener (Karte, 'Rechtsklick', Funktion (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 7- Wir schaffen unsere HTML auf herkömmliche Weise und führen Sie unser Beispiel aus. Sehen wir uns an, wie unser Kontextmenü aussieht, wenn wir mit der rechten Maustaste auf unsere Karte klicken:
VERGRÖSSERN
VERGRÖSSERN
