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!