Verwendung von Vektoren in Google Maps

Die mit dem generierten Karten JavaScript-API von Google Maps Sie werden nicht immer statisch sein, obwohl sie die meiste Zeit zur Visualisierung verwendet werden, dies ist nicht immer der Fall, weshalb wir manchmal ihren Umfang erweitern müssen, damit sie zusätzliche Informationen anzeigen können.
Diese zusätzlichen Informationen, die wir einschließen müssen, werden mit dem Vektor die nichts anderes sind als Formen, die aus Punkten bestehen, in denen alle Arten von Vektoren, die von den API Sie heißen Überlagerungen oder überlagern.
EmpfehlungIn früheren Tutorials sahen wir die Einführung in API, wir haben die wichtigsten Optionen überprüft, wir haben gelernt, wie man die Anmeldeinformationen für Entwickler von . erhält Google und wir führen einige einfache Anwendungsbeispiele durch, daher empfehlen wir Ihnen, sich dieses Tutorial anzusehen, bevor Sie den Inhalt dieses Tutorials lesen oder die hier genannten Beispiele ausführen.
Nachdem wir das empfohlene Tutorial durchgegangen sind und im Kontext stehen, gehen wir zu den praktischen Beispielen über, um die Verwendung von Vektoren in unseren mit der API generierten Karten besser zu verstehen.
Die Verwendung der mit dem erstellten Karten API es konzentriert sich am häufigsten auf Websites, deren Hauptfunktion darin besteht, den Standort eines Unternehmens oder Geschäfts anzuzeigen. Wir können das a . nennen Sehenswürdigkeit dass wir es problemlos mit einer Art von Vektor darstellen können, die im Sinne der JavaScript-API von Google Maps ist bekannt als Marker.
Sehen wir uns ohne weiteres die Schritte an, die wir ausführen müssen, um einen Standardmarker und zusätzlich einen benutzerdefinierten in unserer Karte zu implementieren.
1- Das erste, was wir tun müssen, ist die API und die Stile für die Visualisierung unserer Karte ist es wichtig zu beachten, dass wir unsere verwenden müssen Anmeldeinformationen für Google-Entwickler für den korrekten Betrieb dieses Beispiels:

2- Wir definieren unsere globalen Variablen, eine sogenannte Karte und eine Reihe von Variablen, die wir verwenden werden, um zufällige Markierungen nach Koordinaten zu generieren, die den Bereich von . umgeben Madrid.:

 var-Karte; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, MarkerId = 1; 

3- Dann definieren wir die Initialisierungsfunktion unserer Karte, die die wichtigsten Optionen dafür enthält als Zoom, Basistyp für Karte und Mittelpunktskoordinaten das sind in diesem Fall die von Madrid, wir bekommen die ICH WÜRDE der div von der SONNE, initialisieren wir die Karte und definieren eine Funktion, um die Ereignisse zu behandeln, wenn wir die Markierungen auf der Karte positionieren. Schauen wir uns das gerade beschriebene Codesegment an:

 Funktion initializeMap () {google.maps.visualRefresh = true; var mapOptions = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map = new google.maps.Map (mapElement, mapOptions); EreignisseMarker (); } 

4- Jetzt müssen wir unsere Funktion aufbauen EreignisseMarker () das in seiner Definition zwei Ereignisse hat, die pro Klick gemäß der ID, die von zwei verschiedenen Links gedrückt wird, gebunden sind und zwei weitere Funktionen aufrufen, die für das Setzen der Lesezeichen verantwortlich sind:

 functionMarkerEvents () {document.getElementById ('add_Marker').addEventListener ('click', function () {addMarker();}); document.getElementById ('add_person_Marker') addEventListener ('click', function () {addPersonMarker ();}); } 

5- Vor dem Konstruieren der beiden Funktionen, die die Marker setzen, ist es wichtig, etwas an den Koordinaten zu arbeiten, damit sie uns Zufallswerte in diesem Bereich liefern und sie von den interpretiert werden können JavaScript-API von Google Maps, werden wir dies mit einigen arithmetischen Operationen an den globalen Variablen der Koordinaten tun, sehen wir uns die entsprechende Funktion an:

 Funktion createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.zufällig (); var newLat = minLat + rndNumLat * deltaLat; var rndNumLng = Math.zufällig (); var newLng = minLng + rndNumLng * deltaLng; Rückgabe von neuem google.maps.LatLng (newLat, newLng); } 

6- Sobald dies erledigt ist, können wir unsere Funktionen erstellen, um die Markierungen auf unserer Karte zu fixieren, dafür tun wir dies mit der Methode Marker Um einen Standardmarker zu generieren und mit der vorherigen Funktion generieren wir die zufällige Koordinate, wo sie angezeigt wird:

 Funktion addMarker () {var-Koordinate = createLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, title: 'Random Marker -' + markerId}); MarkerId ++; } 

Bevor wir zu unserem benutzerdefiniertes Lesezeichen Es ist wichtig zu erwähnen, dass es auf Symbolen basiert und diese im Verzeichnis unseres Projekts verfügbar sein müssen. Für diese Übung wurden einige der kostenlosen Symbole auf der Mapicons-Seite unter der Kategorie . verwendet Markierungen, damit sie für uns problemlos funktionieren, dafür laden wir einige herunter und legen sie in einen Ordner namens img befindet sich an der Wurzel unseres Projekts, wie wir im folgenden Bild sehen können:

VERGRÖSSERN

7- Nachdem wir unsere Icons haben, müssen wir nur noch unsere Funktion bauen, dafür erstellen wir ein Array mit den Namen unserer Icons und wir werden sie zufällig ausführen, um unserer Methode einen zusätzlichen Parameter zu geben Marker namens Symbol die das heruntergeladene Bild verwendet, um die Markierung zu setzen:

 function addPersonMarker () {var markerIcons = ['comics', 'videogames', 'computers', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var-Koordinate = createLaLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, icon: 'img /' + markerIcons [rndMarkerId] + '.png.webp', title: 'Random Marker -' + markerId}); MarkerId ++; } 

8- Schließlich fügen wir das Ereignis hinzu, um unsere Karte zu initialisieren und erstellen zwei Links vor unserem div mit den IDs, die wir für unsere Ereignisse definieren, die die entsprechenden Funktionen aufrufen:

 google.maps.event.addDomListener (window, 'load', initializeMap); Lesezeichen hinzufügen
Lesezeichen hinzufügen | Benutzerdefiniertes Lesezeichen hinzufügen

Damit haben wir bereits unsere Karte mit der Funktionalität hinzufügen zu können Standardmarker Ja Benutzerdefiniert Je nachdem, was wir auswählen, ist es wichtig zu erwähnen, dass wir so viele Lesezeichen hinzufügen können, wie wir möchten. Dadurch können wir die Funktionsweise der API sehen. Zum Abschluss sehen wir uns an, wie sie in unserem Browser aussieht:

VERGRÖSSERN

In allen Anwendungen, die wir im Internet finden, die eine Karte anzeigen, schließen sie die Möglichkeit nicht aus, Informationen zu dem Punkt anzuzeigen, auf den sie zeigen. Aus diesem Grund haben wir die Möglichkeit, ein Popup- oder Dropdown-Fenster hinzuzufügen Um Informationen entsprechend einer bestimmten Position auf unserer Karte oder sogar einer Markierung anzuzeigen, sehen wir uns an, wie wir dies tun können:
1- Wir werden eine neue Datei erstellen add_popup.html und wir werden das vorherige Beispiel als Grundlage verwenden, um die neuen Funktionalitäten einzufügen, dazu kopieren wir den Code unserer Karte und fügen ihn ein und wir werden die Funktion lokalisieren initializeMap() Nachdem wir die ID erhalten haben, definieren wir das Popup für die Mitte unserer Karte mit der InfoWindow-Methode. Sehen wir uns den Code für die oben genannte Funktionalität an:

 var infowindow = new google.maps.InfoWindow ({content: 'Popup-Inhalt:
Dieses Popup zeigt die Mitte der Karte, die Madrid ist', Position: neu google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (Karte); 

2- Jetzt werden wir unsere Funktion ändern addMarker () um jedem Marker, der auf unserer Karte erscheint, ein Popup hinzuzufügen, dafür verwenden wir die Funktion erneut InfoFenster () und wir fügen ein Ereignis für die Variable hinzu, die wir mit der Methodeninstanz definieren, mal sehen:

 Funktion addMarker () {var-Koordinate = createLgRandom (); var marker = new google.maps.Marker ({position: coordinate, map: map, title: 'Random Marker -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (Marker, 'Klick', Funktion () {infowindow.open (Karte, Marker);}); MarkerId ++; } 

3- Wenn dies erledigt ist, sehen wir uns an, wie unsere Karte mit der Funktionalität des gerade eingefügten Popups aussieht:

VERGRÖSSERN

4- Zum Schluss sehen wir uns die ähnliche Funktionalität an, die wir auf unsere Lesezeichen anwenden. Wir tun dies, indem wir auf den Link klicken Lesezeichen hinzufügen:

VERGRÖSSERN

Wie wir sehen konnten, ist die Erweiterung der Funktionalität unserer Karten und Markierungen recht einfach, wir müssen nur die entsprechenden Methoden anwenden, um dies zu erreichen.
Wir haben die Leistungsfähigkeit von Vektoren bereits getestet, indem wir die Points of Interest auf einer Karte mit dem MarkierungenWir können jedoch Vektoren verwenden, um Linien zu zeichnen und die Route zwischen zwei Punkten auf unserer Karte anzuzeigen. Mal sehen, wie wir es machen:
1- Wir werden eine Datei namens . erstellen add_line.html und wir werden unsere API sowie die Stile des ersten Beispiels einschließen, jetzt werden wir die Koordinaten definieren, die von Madrid zu Barcelona, mal sehen:

 var-Koordinaten Linie = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833,2.1833]]; 

2- Bevor wir zur Initialisierungsfunktion unserer Karte übergehen, erstellen wir zuerst die Funktion addLine () Das erste, was wir tun werden, ist, über das Koordinaten-Array zu iterieren und ein neues Array zu erstellen, das ein Objekt vom Typ enthält LatLng, mal sehen:

 Funktion addLine () {var pointCount = CoordinateLine.length; var linePath = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = new google.maps.LatLng (coordinateLine [i] [0], coordinateLine [i] [1]); linePath.push (tempLatLng); } 

3- Dann legen wir die Eigenschaften für unsere Linie fest, wie Farbe, Deckkraft und Dicke. Danach müssen wir nur noch an die Methode senden Polylinie die Optionen als Parameter und setzen Sie die Polylinienvariable auf die aktuelle Karte:

 var lineOptions = {path: linePath, StrokeWeight: 7, StrokeColor: '# 313cac', StrokeOpacity: 0.8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (Karte); } 

4- Endlich erstellen wir unsere bekannte Funktion initializeMap() und anstatt eine Funktion namens MarkerEvents am Ende zu haben, werden wir diese Zeile durch den Namen unserer Funktion ersetzen addLine (), erstellen wir unser HTML und führen es in unserem Browser aus, es sollte so aussehen:

VERGRÖSSERN

Im vorherigen Beispiel fügen wir unserer Karte eine Linie hinzu und demonstrieren somit die Vereinigung zweier Punkte, um die Route zwischen ihnen zu demonstrieren, jedoch fehlt diesem Beispiel, obwohl es anschaulich ist, immer noch etwas und es ist die Tatsache, dass die Mobilität zwischen diesen beiden Punkten gezeigt wird , wie ein fahrendes Auto.
Das mag kompliziert klingen, ist es aber nicht, mit Hilfe der Klassen und Methoden der API Wir können es mit ein paar Zeilen Code lösen, mal sehen, wie wir es machen:
1- Das erste ist, unsere API, unsere Stile und wir definieren unsere globalen Variablen, wir verwenden die gleichen Koordinaten des vorherigen Beispiels, um den gleichen Pfad zu verwenden, zusätzlich definieren wir die Variable Polylinie als global, um es im vollen Umfang unserer Javascript:

 var-Karte; var Polylinie; var-Koordinaten Linie = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833,2.1833]]; 

2- Jetzt erstellen wir unsere Funktion addAnimatedLine () die eine ähnliche Struktur wie die Funktion haben wird addLine () Aus dem vorherigen Beispiel hat diese Funktion jedoch die Definition des Symbols, das wir verwenden werden, um das sich bewegende Objekt zwischen diesen beiden Punkten anzuzeigen. In diesem Fall verwenden wir einen Pfeil:

 var arrowSymbol = {strokeColor: '# 000', scale: 3, path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 

3- Zum Schluss müssen wir diese Variable nur noch auf die Option setzen Symbole aus der Definition der Linie:

 var lineOptions = {path: linePath, icons: [{icon: arrow symbol}], StrokeWeight: 3, StrokeColor: '# 313cac', StrokeOpacity: 0.8} 

4- Sobald dies erledigt ist, müssen wir nur unser Symbol animieren und dies tun wir in der Funktion namens animateArrow () die wir am Ende der Definition der Funktion einfügen müssen addAnimatedLine () Sehen wir uns an, was die Funktion enthält:

 Funktion animateArrow () {var-Zähler = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var arrows = polyline.get ('icons'); arrows [0] .offset = (counter / 2) + '%'; polyline.set ('Symbole', Pfeile);}, 50); } 

5- Zum Abschluss initialisieren wir unsere Karte wie wir sie bereits kennen und rufen unsere Funktion auf addAnimatedLine ()Sehen wir uns an, wie es in unserem Browser aussieht. Es ist wichtig zu erwähnen, dass der Pfeil eine Bewegung von Punkt zu Punkt bewirkt:

VERGRÖSSERN

Mit diesem letzten Beispiel beenden wir dieses Tutorial, da wir sehen konnten, dass die Verwendung von Vektoren in unseren Karten es uns ermöglicht, ihre Funktionalität und Nützlichkeit zu erhöhen, was uns die Möglichkeit gibt, interessante Punkte bis hin zu alternativen Routen zu den Punkten zu implementieren, die wir darin platzieren .Hat 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