Inhaltsverzeichnis
Die Dienstleistungen der JavaScript-API von Google Maps sind so vielfältig wie funktional, sie haben eine Qualität, die sich unterscheidet Google Maps Bei Mitbewerbern arbeiten diese Dienste in der Regel asynchron, wodurch die Anfrage an einen externen Server gestellt werden kann und eine Methode vom Typ Callback für die Verarbeitung der Antworten zuständig ist.Eine der Stärken dieser Dienste besteht darin, dass sie vollständig mit API-Klassen und -Objekten kompatibel sind. Wir können von der Abfrage der Adresse eines bestimmten Punktes auf unserer Karte bis hin zur Implementierung der Straßenansicht.
Bevor wir zu den Beispielen übergehen, sehen wir uns einige der wichtigsten Dienste an, die wir in diesem Tutorial verwenden werden.
GeokodierungDieser Dienst ermöglicht es uns, gängige Adressen in geografische Koordinaten basierend auf dem Breiten- und Längengrad eines Punktes umzuwandeln. Dies ermöglicht uns, Markierungen zu platzieren oder unsere Karte zu positionieren, um diese Operationen durchzuführen, bietet die API eine Klasse namens Geocoder ().
DistanzmatrixDieser Dienst hilft uns, die Entfernung und Dauer der Route zwischen mehreren Punkten zu berechnen, was heute weit verbreitet ist google.maps.DistanceMatrixService und die dazugehörigen Methoden.
StraßenansichtService Straßenansicht oder Street View bietet uns 360-Grad-Panoramaansichten in den Bereichen, in denen sie abgedeckt ist, was unsere Karten ohne Zweifel hervorheben wird.
Denken Sie daran, dass ich hier die Funktionsweise der API und die Ereignisbehandlung in Google Maps und die Einführung zum Verständnis der Javascript-API in Google Maps detailliert beschrieben habe.
Um dieses Beispiel auszuführen, verwenden wir den Dienst Geocoder () Aber wie bereits erwähnt, ermöglicht uns dies, eine Adresse in eine Koordinate umzuwandeln, das ist in Ordnung, aber für den herkömmlichen Benutzer ist es etwas, das nicht viel Nutzen dafür sieht, deshalb werden wir das verwenden umgekehrter Geocoder um die benötigte Adresse mit einem Klick zu erhalten. Sehen wir uns die Schritte an, die wir befolgen müssen:
1- Zuerst binden wir, wie wir bereits wissen, die API ein, ohne zu vergessen, unsere Zugangsdaten zu verwenden, außerdem werden wir die Bibliothek von . einschließen Zeichnung Damit wir die Funktionalität von Zeichenmarkierungen implementieren können, verketten wir diese Bibliothek mit dem &-Symbol mit unseren Anmeldeinformationen, wie wir unten sehen werden:
2- Wir dürfen die Stile für die Karte nicht vergessen, die ihr die Art der Visualisierung auf der Seite geben, sowie die Definition der globalen Variablen, die in allen Methoden unseres Codes einen globalen Geltungsbereich haben:
var-Karte; var-Geocoder var-Popup;
3- Danach definieren wir unsere Methode initializeMap() wo wir als erstes unser typobjekt deklarieren Geocoder hilf uns aus der Klasse Geokodierer () und mit InfoFenster das Objekt für das Popup, das die Adresse auf dem Bildschirm anzeigt:
Funktion initializeMap () {Geocoder = new google.maps.Geocoder (); popup = neues google.maps.InfoWindow (); 4- Wir beziehen die herkömmlichen Optionen der Karte wie das Zentrum, den Zoom und die Art der Basis ein, wir erhalten das Element SONNE und wir instanziieren die Methode Karte:
google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Jetzt erstellen wir den Zeichenmanager, mit dem wir Markierungen zeichnen können, dafür machen wir eine Instanz von ZeichnungsManager, machen wir es in der Benutzeroberfläche sichtbar und wählen aus, welche Modi im Steuerelement angezeigt werden und an welcher Position sie sich befinden:
var DrawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, DrawingModes: [google.maps.drawing.OverlayType.MARKER]}}); 6- Jetzt aktivieren wir die neu erstellte Funktionalität, fügen den Listener für unser Event hinzu und führen ihn durch umgekehrter Geocoder Wir erhalten die Position in Breite und Länge unseres Markers mit der Methode getPosition():
DrawingManager.setMap (Karte); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) {var markerPosition = marker.getPosition (); 7- Um die zu vervollständigen umgekehrter Geocoder wir werden den service von nutzen Geokodierung () und wir machen eine Bedingung, um zu überprüfen, ob der Dienst eine gültige Antwort zurückgibt, wenn wir ihn nicht behandeln, damit der Benutzer weiß, dass er fehlgeschlagen ist, und wenn das Ergebnis korrekt ist, rufen wir unsere Methode auf Adresse anzeigen ():
geocoder.geocode ({'latLng': markerPosition}, Funktion (Ergebnisse, Status) {if (status == google.maps.GeocoderStatus.OK) {if (Ergebnisse) {ShowAddress (Ergebnisse [0], Markierung);}} else {alert ("Dienst fehlgeschlagen:" + Status);}}); 8- Schließlich müssen wir nur noch die Methode von . bauen Adresse anzeigen () der das Ergebnis unseres Reverse-Geocoders und die Position des Markers erhält, damit können wir den Mittelpunkt festlegen und die Informationen der formatierten Adresse problemlos anzeigen:
Funktion ShowAddress (Ergebnis, Markierung) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adresse: '+ result.formatted_address; popup.setContent (popupContent); popup.open (Karte, Markierung); } 9- Wir schließen die entsprechenden Tags und fügen den Teil des HTML-Codes hinzu, um unser Beispiel zu vervollständigen:
Finden Sie die Adresse auf der Karte mit einem Klick
10- Wir führen in unserem Browser aus und klicken auf einen beliebigen Punkt auf unserer Karte und erhalten die Adresse, die in dem von uns angegebenen Popup angezeigt wird. Sie sollte wie folgt aussehen:
VERGRÖSSERN
Das JavaScript-API von Google Maps bietet uns sehr nützliche Dienste, einer davon ist der Distanzmatrix Dies ermöglicht es uns, die Entfernung und die Zeit zwischen mehreren Punkten zu berechnen, eine Funktionalität, mit der wir verschiedene Lösungen in jedem Unternehmen implementieren können, von der Berechnung der Lieferzeiten bis hin zur Ermittlung der optimalsten Route zwischen verschiedenen Punkten. Sehen wir uns die Schritte an, die wir ausführen müssen, um diese Funktionalität zwischen unseren Karten zu implementieren.
1- Wir binden unsere API zusammen mit der Bibliothek ein Zeichnung, sowie die Stile für die Darstellung unserer Karte und des Containers unserer Matrix:
2- Wir definieren globale Variablen zur Verwendung im gesamten Umfang unseres Codes und in der Funktion initializeMap() Wir initialisieren die Arrays, um den Breiten- und Längengrad sowohl des Ursprungs als auch des Ziels zu verarbeiten:
var-Karte; var originLatLon; var ZielLatLon; var distanceMatrixService; var MarkerAnzahl; var arrayResult; Funktion initializeMap () {originLatLon = []; ZielLatLon = []; 3- Dann erhalten wir in der gleichen Funktion den Button und den Eventhandler dafür, zusätzlich initialisieren wir das Objekt für den Dienst von DistanceMatrixService sowie den Zähler für die Marker und ordnen Sie das Ergebnis des Arrays einem Container-Div zu:
var generateBtnMatrix = document.getElementById ('generateMatrix'); GenerateBtnMatrix.addEventListener ('Klick', Funktion () {MatrixRequest ();}); distanceMatrixService = new google.maps.DistanceMatrixService (); Markierungsanzahl = 0; Ergebnis-Array = document.getElementById ('Ergebnis-Array'); 4- Wir beziehen die herkömmlichen Optionen der Karte wie das Zentrum, den Zoom und die Art der Basis ein, wir erhalten das Element SONNE und wir instanziieren die Methode Karte:
google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 5- Wie in der vorherigen Übung haben wir den Zeichenmanager erstellt, der es uns ermöglicht, Markierungen zu zeichnen, dafür machen wir eine Instanz von ZeichnungsManager und wir stellen die notwendigen Optionen bereit, aktivieren sie und fügen den Listener für das Ereignis hinzu:
var DrawingManager = new google.maps.drawing.DrawingManager ({drawingMode: null, drawingControl: true, drawControlOptions: {position: google.maps.ControlPosition.TOP_CENTER, DrawingModes: [google.maps.drawing.OverlayType.MARKER]}}); DrawingManager.setMap (Karte); google.maps.event.addListener (drawingManager, 'markercomplete', function (marker) { 6- Danach führen wir die Validierungen durch, um die Anzahl der zulässigen Ziele zu begrenzen und die Symbole festzulegen, die wir für unsere Lesezeichen verwenden werden:
MarkerAnzahl ++; if (markerCount> 10) {alert ("Keine weiteren Ziele erlaubt"); drawManager.setMap (null); marker.setMap (null); Rückkehr; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); aufrechtzuerhalten. Sonst {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.png.webp'); }}); 7- Jetzt müssen wir nur noch unsere Funktionen erstellen, um die Anfragen an den Dienst von . zu bearbeiten DistanceMatrixService, erstellen wir zuerst diejenige, die die Anforderungseigenschaft vorbereitet:
functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({Ursprung: LatinSource, Ziele: LatinDestiny, travelMode: google.maps.TravelMode.DRIVING,}, getMatrixResult); } 8- Wir erstellen die Funktion für den Rückruf, die es uns ermöglicht, die Antwort des Dienstes zu erhalten und in die wir die erforderlichen Validierungen einbeziehen, falls der Dienst den Fehler nicht optimal behandelt:
Funktion getResultMatrix (Ergebnis, Status) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = result.originAddresses; var destinationAddresses = result.destinationAddresses; for (var i = 0, l = originAddresses.length; i < l; i ++) {var elements = result.rows [i] .elements; for (var j = 0, m = elements.length; j < m; j ++) {var originAddress = originAddresses [i]; var Zieladresse = Zieladressen [j]; var-Element = Elemente [j]; var.abstand = element.abstand.text; var Dauer = element.duration.text; resultsDivMatrix (originAddress, destinationAddress, Distanz, Dauer, i, j); }}} else {alert ('Array konnte nicht abgerufen werden:' + status); } 9- Zusätzlich erstellen wir die Funktion, die die erhaltenen Ergebnisse in das entsprechende Div schreibt:
functionDivMatrixResults (originAddress, destinationAddress, Distanz, Dauer, originAddressCount, destinationAddressCount) {var existingContent = resultResult.innerHTML; var neuerInhalt; neuerInhalt = 'Herkunft '+ countLetters (originAddressCount) +':
'; newContent + = originAddress + '
'; neuerInhalt + = 'Ziel '+ countLetters (destinationAddressCount) +':
'; neuerInhalt + = Zieladresse + '
'; neuerInhalt + = 'Bestimmung: '+ Entfernung +'
'; neuerInhalt + = 'Bestimmung: '+ Dauer +'
'; neuerInhalt + = '
'; resultArray.innerHTML = vorhandener Inhalt + neuer Inhalt; } 9- Endlich in unserem Javascript Wir behandeln die Zähler in einer Funktion, um den Namen zurückzugeben, der dem Zähler des Markers entspricht, den wir platzieren:
Funktion countLetters (count) {switch (count) {Fall 0: 'Comics Store' zurückgeben; Fall 1: 'Videospielladen' zurückgeben; Fall 2: 'Comics Store' zurückgeben; Fall 3: 'Comics Store' zurückgeben; Fall 4: 'Videospielladen' zurückgeben; Standard: Rückgabe null; }} 10- Wir schließen die entsprechenden Tags und fügen den Teil des Codes hinzu HTML um unser Beispiel zu vervollständigen:
Distanzmatrix verwenden
11- Wir führen unser Beispiel im Browser aus und um die Bedienung unserer Karte zu visualisieren, platzieren wir 4 Points of Interest und drücken den Button Abstandsmatrix erstellen:
VERGRÖSSERN
Zum Abschluss dieses Tutorials implementieren wir den Dienst Straßenansicht, Es ist ein ziemlich einfaches Beispiel, aber das zu den anderen verfügbaren Diensten hinzugefügt wird, wird unsere Karten von den anderen abheben. Sehen wir uns an, was wir tun müssen, um diesen Dienst zu implementieren:
1- Wir binden die API ein und definieren die entsprechenden Stile, in diesem Beispiel werden wir die Zeichnungsbibliothek nicht verwenden, so dass sie nicht enthalten ist:
2- Wir definieren unsere globalen Variablen und erstellen unsere Funktion initializeMap() Mit den herkömmlichen Optionen Kartenmittelpunkt, Zoom und Basistyp erhalten wir das Element SONNE und wir instanziieren die Methode Karte:
var-Karte; var-Geocoder; var streetView; Funktion initializeMap () {Popup = neues google.maps.InfoWindow (); Geocoder = neuer google.maps.Geocoder (); google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 3- In unserer Funktion nennen wir den Service von Straßenansicht und danach erstellen wir eine Funktion, um ihre Optionen wie Standort und Standpunkt festzulegen:
streetView = map.getStreetView (); } Funktion setOptionsStreetView (Ort) {streetView.setPosition (Ort); streetView.setPov ({Überschrift: 0, Juckreiz: 10}); } 4- Schließlich erstellen wir die Funktionen, um zwischen der herkömmlichen Kartenansicht und der Straßenansicht, mal sehen, wie diese aussehen:
Funktion showMap () {streetView.setVisible (false); } Funktion showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (wahr); } 5- Wir schließen die entsprechenden Tags und fügen den Teil des Codes hinzu HTML um unser Beispiel zu vervollständigen:
Karte mit Street View
6- Wir führen unser Beispiel im Browser aus und drücken die Schaltfläche Street View anzeigen um die Funktionalität zu visualisieren, wie wir im folgenden Bild sehen können:
VERGRÖSSERN
Damit beenden wir dieses Tutorial, da wir die in der JavaScript-API von Google Maps Sie ermöglichen es uns, die Funktionalitäten unserer Karten noch weiter zu erweitern und sie als Option zu positionieren, um sie in den von uns implementierten Systemen zu berücksichtigen, die Standort- und Zeit- und / oder Entfernungsberechnungen benötigen.
Ich erinnere Sie an dieses Tutorial, das auch nützlich sein wird: Lernen Sie die Verwendung von Vektoren in Google MapsHat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
