Google Maps machte mit gmaps.js einfach

Google Maps hat sich als sehr erfolgreicher Google -Service erwiesen, der eine Reihe von unschätzbaren Tools wie Straßenansicht, Routenplanung und Google -Verkehr enthält. Viele Unternehmen und Organisationen sind auf Google Maps angewiesen, um ihre Dienste anzubieten - und der Google Maps -API können sie dazu in der Lage sein.

Key Takeaways

• gmaps.js ist eine Open-Source-JavaScript-Bibliothek, die die Google Maps JavaScript-API vereinfacht und es Entwicklern erleichtert, benutzerdefinierte Anwendungen mit Karten zu erstellen.
• gmaps.js bietet verschiedene Komponenten zum Anpassen von Karten, einschließlich Markern, Polygonen, Overlays, Geolokalisierung, Geokodierung und Ereignissen. Es ermöglicht auch die Erstellung statischer Karten, die in Websites eingebettet werden können.
• Die Bibliothek enthält Methoden zum Hinzufügen und Entfernen von Markern, Zeichnen von Polylines und Polygonen, zum Erstellen von kreisförmigen Formen und zum Hinzufügen von Overlays mit HTML -Inhalt.
• Geokodierung, der Prozess der Berechnung geografischer Koordinaten aus einer bestimmten Standortadresse, kann unter Verwendung der Geocode () -Methode in gmaps.js erreicht werden. In ähnlicher Weise kann die Geolocate () -Methode verwendet werden, um die aktuelle geografische Position des Benutzers zu berechnen.
• gmaps.js unterstützt auch Ereignisse, sodass Entwickler Funktionen zum Auftreten spezifischer Ereignisse über der Karte aufrufen können, z. B. ein Doppelklick oder einen Mausover.

Die Google Maps API und GMAPs

Google hat 2005 die Google Maps -API eingeführt. Dadurch konnten Entwickler benutzerdefinierte Anwendungen mit Karten erstellen. Google hat anschließend APIs für die Entwicklung von Android und iOS -Anwendungen gestartet.

So nützlich die Karten -APIs sind, sie nehmen ein wenig Know -how. Hier kommt gmaps.js ins Spiel. GMAPS wurde von Gustavo Leon geschrieben und zielt darauf ab, die ursprüngliche Google Maps JavaScript -API zu vereinfachen. Es kümmert sich um den umfangreichen API -Code und bietet geeignete Methoden, um mit Karten umzugehen. Es ist sauberer, prägnanter und daher einfacher zu bedienen.

In diesem Artikel werden wir Kartenkomponenten wie Marker, Polygone und Overlays betrachten. Wir werden auch statische Karten und die Verwendung von Geolokalisierung und Geokodierung zum Betrieb am Standort eines Benutzers besprechen. All dies wird in Bezug auf GMAPs beziehen. Es hilft Ihnen, Kartenanwendungen mit benutzerfreundlichen Methoden zu erstellen. Ich habe es verwendet, um eine Beispielanwendung (MAPIT) zu erstellen, die ich am Ende des Artikels weiter diskutieren werde.

Die Google -API und GMAPs verglichen

Das folgende Beispiel ist auf der Seite "Originaldokumentation". Der Code (nur JavaScript) lädt eine Karte mit seiner Mitte in Breitengrad -34.397 und 150,644 Längengrad mit einem Zoomebene von 8:

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>

Karte ist die HTML -Element -ID, auf der die Karte geladen wird.

Wir können dieselbe grundlegende App mit GMAPs wie folgt schreiben:

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>

Dieses Tutorial führt Sie durch einige der am häufigsten verwendeten Komponenten in Karten, mit Beispielstiften, um jeweils zu demonstrieren.

Erste Schritte

Erstellen Sie eine grundlegende HTML -Seite und fügen Sie eine Referenz auf die Maps -API hinzu. Sie müssen auch die GMAPS -Bibliothek einbeziehen. Gehen Sie also zu GMAPs und laden Sie gmaps.js herunter. Fügen Sie es in Ihre Webseite ein und Sie können loslegen.

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>

Dies ist eine rudimentäre Seite, auf die ich in den folgenden Beispielausschnitten verweist. Das Kartenobjekt wird in einigen dieser Beispiele geändert.

Komponenten

Die Maps -API bietet verschiedene Komponenten zum Anpassen von Karten. Die gleichen Komponenten können mit GMAPs mit weniger Code hinzugefügt werden.

Ereignisse

Eine Änderung im HTML -DOM (Dokumentobjektmodell) kann als Ereignis beschrieben werden. Sie können eine Funktion über das Auftreten bestimmter Ereignisse über der Karte aufrufen (wie ein Doppelklick oder ein Mausover). Das folgende Snippet definiert Funktionen für Click and Zoom_Changed -Ereignisse:

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Sie können andere Ereignisse hinzufügen, wenn Sie möchten. Eine Liste aller MAP -Ereignisse finden Sie im Abschnitt Ereignisse in der Dokumentation. Einige der nützlichen sind:

Ereignis Beschreibung DBLCLICK Double Mausklick Mausover Maus tritt eine Karte ein Mausout Maus verlässt die Karte ziehen Karte wird gezogen Rightclick Rechte Mausklick

Beispiel Pen

Marker

Ein Marker ist ein Locator auf einer Karte. Es wird im Allgemeinen als Ballon gezeigt, der über dem markierten Ort hängt. GMAPS bietet die addmarker () -Methode zum Hinzufügen eines Markers an. Es akzeptiert ein Objektliteral mit den folgenden Eigenschaften für den Marker:

• lat: latitude
• lng: Längengrad
• Titel: Titel auf Mausover
angezeigt
• Symbol: Benutzerdefiniertes Bild für den Marker
• Details: benutzerdefiniertes Objekt mit zusätzlichen Daten
• infowindow: Informationen über den Marker

von diesen ist es obligatorisch, LAT und LNG Werte zuzuweisen, während die anderen optional sind. Der Wert von Infowindow sollte ein anderes Objekt sein. Dieses Objekt selbst hat die folgenden Eigenschaften:

• Inhalt: HTML -Inhalt
• Maxwidth: Maximale Breite für das Fenster. Wenn nicht eingestellt, erstreckt sich die Fensterlänge des Textes darin.

Infowindow unterstützt weitere Optionen.

Dieses Snippet ist ein gültiges Beispiel von Addmarker ():

<span>var mapObj = new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: 48.857,
</span>  <span>lng: 2.295,
</span>  <span>click: function(e) {
</span>    <span>alert('You clicked on the map');
</span>  <span>},
</span>  <span>zoom_changed: function(e) {
</span>    <span>alert('You zoomed the map');
</span>  <span>}
</span><span>});</span>

addmarker () akzeptiert auch Ereignisse - zum Beispiel ein Marker, der auf das Mausover -Ereignis reagiert:

<span>var m = mapObj.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>title: 'Eiffel Tower',
</span>  <span>infoWindow: {
</span>    <span>content: '<h4>Eiffel Tower</h4><div>Paris, France</div>',
</span>    <span>maxWidth: 100
</span>  <span>}
</span><span>});</span>

Beispiel Pen

Ein Marker kann unter Verwendung der Methode removemarker () entfernt werden. Übergeben Sie das Markerobjekt an ihn (m in unserem Fall) als Argument:

mapObj<span>.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>mouseover: function(e) {
</span>    <span>alert('Triggered');
</span>  <span>}
</span><span>});</span>

removemarker () entfernt gemeinsam alle dem Kartenobjekt zugeordneten Markierungen.

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>

Geocoding

Um einen Punkt auf einer Karte zu lokalisieren, müssen Sie seine geografischen Koordinaten ( Breitengrad und Länge ) haben. Die Geokodierung berechnet diese geografischen Koordinaten aus einer bestimmten Standortadresse. Mit der GeoCode () -Methode können wir dasselbe tun. Die Standortadresse als Eingabe- und Prozessekoordinaten für diese Adresse.

• Adresse: Standortadressenzeichenfolge
• Rückruf: Funktion aufgerufen nach Geocoding

Berechnen wir den Breitengrad und Längengrad für Stonehenge , das in Großbritannien liegt. Der folgende Ausschnitt wird die geografischen Koordinaten der angegebenen Adresse berechnet und die Karte an diesem Ort zentrieren. Wenn keine Ergebnisse gefunden werden, wird eine Nachricht angezeigt:

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>

Die

setCenter () -Methode nimmt Breite und Längengrad als Parameter ein und zentriert die Karte an diesem geografischen Ort. Es akzeptiert auch einen optionalen Rückrufparameter, eine Funktion, die nach dem Zentrum der Karte ausgelöst wird.

Es gibt zwei Parameter in der Rückruffunktion: Ergebnisse und Status.

Ergebnisse sind ein Objektarray, das die Stellen aller Orte mit der definierten Adresse speichert. Da es mehr als einen Ort mit demselben Namen geben kann, kann es mehr als ein Ergebnis geben. Die Ergebnisse speichern jeden von ihnen. Die Position des I ^th -Ergebnisses kann unter Verwendung von Ergebnissen ermittelt werden [i] .Geometry.location.

Wenn keine Ergebnisse für eine Adresse gefunden wurden, speichert der Status Zero_Results , sonst ok .

Beispiel Pen

Geolocation

Geolocation berechnet die aktuelle geografische Position des Benutzers. Mit der Geolocate () -Methode können wir diese Funktion ausnutzen. Es akzeptiert ein Objektliteral mit vier Eigenschaften, von denen immer optional und die anderen erforderlich sind. Jede Eigenschaft ist definiert als eine Funktion, die in bestimmten Fällen ausgeführt wird:

• Erfolg: Geolokalisierung war erfolgreich
• Fehler: Geolokalisierung war nicht erfolgreich
• nicht_Supportiert: Browser unterstützt Geolocation
nicht
• Immer: In jedem Fall ausgeführt

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Beispiel Pen

Polylines

Polylines tragen dazu bei, einen Pfad auf einer Karte zu verfolgen. Ein Pfad kann gebildet werden, indem Koordinaten verschiedener Punkte verbinden. Die Methode drawpolyline () zeichnet eine Polylinie für einen Pfad. Dieser Pfad wird als Array von Koordinaten bereitgestellt ( Breitengrad und Längengrad ). Abgesehen vom Pfad können Sie andere Eigenschaften für eine Polylinie angeben. Einige von ihnen sind:

• Strokegewicht
• strokecolor
• Strokeopacity

Alle drei definieren den Stil für die Polylinie. Es gibt auch andere, obwohl wir sie in diesem Artikel nicht behandeln werden.

<span>var mapObj = new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: 48.857,
</span>  <span>lng: 2.295,
</span>  <span>click: function(e) {
</span>    <span>alert('You clicked on the map');
</span>  <span>},
</span>  <span>zoom_changed: function(e) {
</span>    <span>alert('You zoomed the map');
</span>  <span>}
</span><span>});</span>

Beispiel Pen

Eine Polylinie kann mit der Methode von REMEPOLYLINE () entfernt werden. Es nimmt das Polyline -Objekt als Parameter. Entfernen Sie PL Polyine mit:

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>

removepolylines () entfernt alle Polylines, die einem Kartenobjekt zugeordnet sind.

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>

Polygone

Drawpolygon () hilft Ihnen, ein Polygon auf einer Karte zu erstellen. Ähnlich wie bei der Methode Drawpolyline () müssen Sie eine Pfadeigenschaft definieren. Die Eigenschaften im Schlaganfallstil (Schlaganfall-, Strokecolor- und Strokeopacity) -Polygon -Arbeit. Sie definieren den Rand des Polygons. Außerdem können Sie die Füllfarbe und Deckkraft für das Polygon angeben:

• fillColor
• fillopacity

Andere Polygonoptionen finden Sie in der Dokumentation.

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Denken Sie daran: Es ist die Pfadeigenschaft für Drawpolyline () und Pfadeigenschaft für Drawpolygon ().

Beispiel Pen

Um das Polygon PG zu entfernen, verwenden Sie:

<span>var mapObj = new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: 48.857,
</span>  <span>lng: 2.295,
</span>  <span>click: function(e) {
</span>    <span>alert('You clicked on the map');
</span>  <span>},
</span>  <span>zoom_changed: function(e) {
</span>    <span>alert('You zoomed the map');
</span>  <span>}
</span><span>});</span>

Entfernen Sie alle in MAPOBJ definierten Polygone:

<span>var m = mapObj.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>title: 'Eiffel Tower',
</span>  <span>infoWindow: {
</span>    <span>content: '<h4>Eiffel Tower</h4><div>Paris, France</div>',
</span>    <span>maxWidth: 100
</span>  <span>}
</span><span>});</span>

Kreise

kreisförmige Formen mit Drawpolygon () ist nicht lebensfähig. Drawcircle () hilft Ihnen dabei. Die Parameterliste enthält:

• lat: Breitengrad für Zentrum
• lng: Länge für Mitte
• Radius: Radius in Metern auf der Erdoberfläche.

Andere Optionen umfassen Stile für Schlaganfall und Füllung der Form (gleich wie Polygon) und einige weitere.

mapObj<span>.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>mouseover: function(e) {
</span>    <span>alert('Triggered');
</span>  <span>}
</span><span>});</span>

Beispiel Pen

Overlays

Eine Überlagerung ist eine Ebene über der Karte mit HTML -Inhalt. GMAPs unterstützt Overlays mit der Methode von Drawoverlay (). Es akzeptiert den folgenden Hash:

• lat: latitude
• lng: Längengrad
• Inhalt: HTML -Inhalt
• vertikalalign: ober, mittlere, unten
• horizontalalgin: links, mittlere, rechts
• vertikaloffset
• horizontaloffset

Die Ausrichtungen und Offsets sind in Bezug auf den von Lat und Lng definierten Punkt

Beispiel für Snippet:

mapObj<span>.removeMarker(m);</span>

Sie können CSS -Stile für den Inhalt definieren. In unserem Beispiel haben wir die Overlay -Klasse definiert.

mapObj<span>.removeMarkers();</span>

Beispiel Pen

Überlagerung entfernen? Nun, du weißt es:

<span>GMaps.geocode({
</span>  <span>address: 'Stonehenge, United Kingdom',
</span>  <span>callback: function(results<span>, status</span>) {
</span>    <span>if (status == 'OK') {
</span>      latlng <span>= results[0].geometry.location;
</span>      mapObj<span>.setCenter(latlng.lat(), latlng.lng());
</span>    <span>} else if (status == 'ZERO_RESULTS') {
</span>      <span>alert('Sorry, no results found');
</span>    <span>}
</span>  <span>}
</span><span>});</span>

Entfernen Sie alle Overlays für ein Kartenobjekt? Das wissen Sie auch:

<span>GMaps.geolocate({
</span>  <span>success: function(position) {
</span>    mapObj<span>.setCenter(position.coords.latitude, position.coords.longitude);
</span>  <span>},
</span>  <span>error: function(error) {
</span>    <span>alert('Geolocation failed: ' + error.message);
</span>  <span>},
</span>  <span>not_supported: function() {
</span>    <span>alert("Your browser does not support geolocation");
</span>  <span>},
</span>  <span>always: function() {
</span>    <span>alert("Always");
</span>  <span>}
</span><span>});</span>

statische Karten

Eine statische Karte ist ein Bild der Karte, das unabhängig in Websites eingebettet werden kann. Mit GMAPs können Sie eine URL zu einer statischen Karte generieren. Diese URL kann dann einem Bild als Quelle hinzugefügt werden.

staticMapurl () erzeugt die erforderliche MAP -URL nach der Einnahme der folgenden Parameter:

• Größe: Ein Array von Breite und Höhe in Pixel
• lat
• lng
• Zoom

Code -Snippet:

<span>var path = [
</span>  <span>[-12.044012922866312, -77.02470665341184],
</span>  <span>[-12.05449279282314, -77.03024273281858],
</span>  <span>[-12.055122327623378, -77.03039293652341],
</span>  <span>[-12.075917129727586, -77.02764635449216],
</span>  <span>[-12.07635776902266, -77.02792530422971],
</span>  <span>[-12.076819390363665, -77.02893381481931],
</span>  <span>[-12.088527520066453, -77.0241058385925]
</span><span>];
</span>
<span>var pl = mapObj.drawPolyline({
</span>  <span>path: path,
</span>  <span>strokeColor: '#76ff03',
</span>  <span>strokeOpacity: 1,
</span>  <span>strokeWeight: 10
</span><span>});</span>

Beispiel Pen

In unserem Beispiel haben wir ein IMG -Element erstellt und die URL zu ihrem SRC hinzugefügt:

mapObj<span>.removePolyline(pl);</span>

Wir können auch Marker und Polylines auf statische Karten anwenden.

Beispiel Pen

Beispielanwendung (MAPIT)

MAPIT (Quelle ansehen auf GitHub) erstellt eine statische Karte für eine Route zwischen Quelle und Ziel. Zoomen Sie zu einer Adresse auf der Karte und platzieren Sie zwei Markierungen (eine Quelle und ein Ziel). MAPIT verfolgt eine Route von einem Marker zum anderen. Mit der aktuellen Konfiguration wird eine URL zur statischen Karte erstellt. Sie können die statische Karte vorschauen und das Bild herunterladen.

Schlussfolgerung

Dieser Artikel umfasst grundlegende Komponenten von Karten. Ich bin mir sicher, dass es sich als eine gute Anleitung für GMAPs und interaktive Kartenanwendungen für den Start geführt hat. Aber es sollte hier nicht aufhören. Es gibt noch viel mehr, was Sie mit gmapsjs machen können.

Haben Sie schon GMAPs verwendet? Wenn ja, was war Ihre Erfahrung? Wenn Sie Kommentare oder Fragen haben, nehmen Sie bitte der folgenden Diskussion bei.

häufig gestellte Fragen (FAQs) zu Google Maps mit gmaps.js

Wie kann ich mit gmaps.js beginnen? Fügen Sie danach die Bibliothek gmaps.js ein. Sie können es aus dem offiziellen Github -Repository herunterladen oder ein CDN verwenden. Sobald Sie diese Skripte eingeschlossen haben, können Sie eine neue Karte initialisieren, indem Sie ein neues GMAPS -Objekt erstellen und die ID des HTML der Karte.

Was sind die wichtigsten Funktionen von gmaps.js? Es bietet eine einfache und intuitive API zum Erstellen und Manipulieren von Karten. Zu den wichtigsten Merkmalen gehören die Möglichkeit, Marker, Polygone und Schichten, Geolokalisierung, Geokodierung und mehr einfach hinzuzufügen. Es unterstützt auch Ereignisse und ermöglicht es Ihnen, auf Benutzerinteraktionen wie Klicks oder Drags zu antworten. .js ist unkompliziert. Sie können die Addmarker -Methode auf Ihrem GMAPS -Objekt verwenden und ein Objekt mit dem Breitengrad und Längengrad des Markers übergeben. Sie können auch andere Optionen wie den Titel, klicken Sie auf Ereignisse und mehr an. Holen Sie sich den aktuellen Standort des Benutzers. Diese Methode gibt ein Versprechen zurück, das sich mit dem Breitengrad und Längengrad des Benutzers auflöst. Sie können diese Informationen dann verwenden, um die Karte am Standort des Benutzers zu zentrieren oder an ihrem Standort einen Marker hinzuzufügen. Adressen in geografische Koordinaten, mit denen Sie Markierungen platzieren oder die Karte positionieren können. Gmaps.js bietet eine Geocode -Methode, die eine Adresse annimmt und ein Versprechen zurückgibt, das mit dem geokodierten Ergebnis auflöst.

Wie kann ich einer Karte mit gmaps.js Ereignisse hinzufügen. Sie können Ihrem GMAPS -Objekt einen Ereignishörer mithilfe der addListener -Methode hinzufügen, die im Ereignisnamen und eine Rückruffunktion übergeben werden, die ausgeführt werden soll, wenn das Ereignis auftritt. ? Sie können eine Ebene mit der Addlayer -Methode auf Ihrem GMAPS -Objekt hinzufügen und den Namen der Ebene übergeben.

Wie kann ich Formen auf einer Karte mit gmaps.js? Bietet Methoden zum Zeichnen verschiedener Formen auf einer Karte, einschließlich Linien, Polygonen, Kreisen und Rechtecken. Sie können das Drawoverlay, Drawpolygon, Drawcircle und DrawRectangle -Methoden auf Ihrem GMAPS -Objekt verwenden. Passen Sie das Erscheinungsbild einer Karte mit Styles an. Sie können beim Erstellen Ihres GMAPS -Objekts eine Stylesoption übergeben. Dies sollte ein Array von Stilobjekten sein, die beschreiben, wie unterschiedliche Elemente der Karte gestylt werden sollten. 🎜>

gmaps.js bietet eine Möglichkeit, Fehler zu behandeln, die bei der Verwendung der Bibliothek auftreten. Sie können auf das Ereignis "Fehler" in Ihrem GMAPS -Objekt anhören, das nach einem Fehler ausgelöst wird. Das Ereignisobjekt enthält Informationen über den Fehler, einschließlich einer Nachricht und einer Stapelverfolgung.

Das obige ist der detaillierte Inhalt vonGoogle Maps machte mit gmaps.js einfach. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!