Hinzufügen von Markierungen zu einer Karte mit der Google Maps -API und dem JQuery -Artikel

Für den Google Maps -Code können wir direkt auf die Google -Server verlinken:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Der Parameter Sensor = False gibt an, dass wir keinen Sensor (wie einen GPS -Locator) verwenden möchten, um den Speicherort des Benutzers zu bestimmen.

Jetzt, da wir unsere grundlegenden Bibliotheken haben, können wir unsere Funktionalität aufbauen.

Umrissen des Skripts

Beginnen wir mit dem Skelett unseres Kartencode:

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

Wir verpacken alle unsere Kartenfunktionen in einem JavaScript -Objekt namens MYMAP, um potenzielle Konflikte mit anderen Skripten auf der Seite zu vermeiden. Das Objekt enthält zwei Variablen und zwei Funktionen. Die Kartenvariable speichert eine Referenz auf das von uns erstellte Google Map -Objekt, und die Grenzenvariable speichert ein Begrenzungsfeld, das alle unsere Markierungen enthält. Dies wird nützlich sein, nachdem wir alle Marker hinzugefügt haben, wenn wir die Karte so zoomen möchten, dass sie alle gleichzeitig sichtbar sind.

Nun für die Methoden: Init finden ein Element auf der Seite und initialisieren Sie es als neue Google -Karte mit einem bestimmten Zentrum und Zoomebene. Placemarker nehmen inzwischen den Namen einer XML -Datei an und laden in Koordinatendaten aus dieser Datei, um eine Reihe von Markierungen auf der Karte zu platzieren.

Laden Sie die Karte

Jetzt, da wir die grundlegende Struktur haben, schreiben wir unsere Init -Funktion:

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();}

Wir erstellen ein Objektliteral, das eine Reihe von Optionen enthält, wobei die an die Methode übergebenen Parameter verwendet werden. Dann initialisieren wir zwei in der Google Maps -API definierte Objekte - eine Karte und eine latlngbounds - und weisen sie den Eigenschaften unseres MYMAP -Objekts zu, die wir früher für diesen Zweck eingerichtet haben.

Der Kartenkonstruktor wird ein DOM -Element übergeben, das als Karte auf der Seite sowie eine Reihe von Optionen verwendet werden soll. Die Optionen, die wir bereits vorbereitet haben, aber um das DOM -Element abzurufen, das wir zur Übergabe der Selektorzeichenfolge benötigen, und mit der JQuery $ -Funktion das Element auf der Seite zu finden. Da $ eher ein JQuery -Objekt als einen rohen DOM -Knoten zurückgibt, müssen wir mit [0] einblecken: Auf diese Weise können wir auf den "nackten" DOM ​​-Knoten zugreifen. Lassen Sie unsere Karte auf der Seite angezeigt und ein leeres Begrenzungsfeld, das bereit ist, beim Hinzufügen unserer Markierungen erweitert zu werden.

Hinzufügen der Marker

Apropos, werfen wir einen Blick auf die Funktion der Plakaten:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Diese Funktion ist etwas komplizierter, aber es ist leicht zu verstehen. Zuerst nennen wir die $ .get -Methode von JQuery, um eine AJAX -Get -Anfrage auszuführen. Die Methode nimmt zwei Parameter vor: die URL zur Anforderung (in diesem Fall unsere lokale XML -Datei) und eine Rückruffunktion, die ausgeführt werden muss, wenn die Anforderung abschließt. Diese Funktion wird wiederum die Antwort an die Anfrage übergeben, die in diesem Fall unser XML sein wird.

jQuery behandelt XML genau das gleiche wie HTML jeder.

wir greifen nach dem Namen und der Adresse der Markierungen, dann erstellen wir ein neues Latlng -Objekt für jeden einzelnen, das wir einer Punktvariablen zuweisen. Wir erweitern das Begrenzungsfeld um diesen Punkt und erstellen dann einen Marker an diesem Ort auf der Karte.

Wir möchten, dass eine Tooltip -Blase immer dann angezeigt wird, wenn ein Benutzer auf diese Markierungen klickt, und wir möchten, dass sie den Namen und die Adresse unseres Standorts enthält. Daher müssen wir jedem Marker einen Ereignishörer mit der Methode Mapi API Event.addListener hinzufügen. Bevor wir das tun, werden wir das Tooltip selbst erstellen. In der Google Maps -API wird diese Art von Tooltip als Infowindow bezeichnet. Deshalb erstellen wir eine neue Infowindow und richten auch HTML ein, um sie mit den erforderlichen Informationen zu füllen. Dann fügen wir unseren Event -Hörer hinzu. Der Hörer feuert immer dann, wenn einer der Markierungen geklickt wird. Beide setzen den Inhalt des Infowindows und öffnen ihn, damit er auf der Karte sichtbar ist.

Nachdem wir alle Marker und zugehörigen Ereignishandler und Infowindows hinzugefügt haben, passen wir die Karte mit der Fitbounds -Methode der Maps API an die Markierungen an. Alles, was wir bestehen müssen, ist das Grenzenobjekt, das wir erweitert haben, um jeden Marker einzuschließen. Auf diese Weise, egal wo die Karte gezoomt oder geworfen wurde, wird sie immer wieder zu einem idealen Zoomebene zurückgezogen, der alle unsere Markierungen enthält.

alles zusammenbinden

Jetzt, da unser Code fertig ist, lassen Sie uns ihn in die Tat umsetzen. Wir werden JQuery's $ ('Dokument') verwenden. Bist du bereit zu warten, bis die Seite geladen ist, und initialisieren

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

Wir fügen auch einen Klick -Event -Listener an die Schaltfläche #Showmarker hinzu. Wenn auf diese Schaltfläche klicken, rufen wir unsere Tischemarker -Funktion mit der URL zu unserer XML -Datei auf. Geben Sie ihm einen Dreh und Sie werden sehen, dass auf der Karte eine Reihe von benutzerdefinierten Markierungen angezeigt werden. Wir haben hier behandelt. Schauen Sie sich also die Dokumentation an, um ein Gefühl für alles zu bekommen, was möglich ist.

Wenn Sie diesen Beitrag genossen haben, werden Sie Lernable lieben. Der Ort, um frische Fähigkeiten und Techniken von den Meistern zu erlernen. Mitglieder erhalten sofortigen Zugang zu allen E -Books und interaktiven Online -Kursen von SitePoint wie JQuery -Grundlagen.

häufig gestellte Fragen (FAQs) zur Google Maps -API mit JQuery

Wie kann ich die Google Maps -API in JQuery integrieren? Zunächst müssen Sie das Google Maps -API -Skript in Ihre HTML -Datei aufnehmen. Anschließend müssen Sie die Karte in Ihrer JavaScript -Datei initialisieren. Sie können JQuery verwenden, um das HTML -Element auszuwählen, in dem Sie die Karte anzeigen möchten. Anschließend können Sie die Google Maps -API -Methoden verwenden, um die Karte entsprechend Ihren Anforderungen anzupassen. Denken Sie daran, "your_api_key" durch Ihren tatsächlichen API -Schlüssel im Skript -Tag zu ersetzen. die Karte. Sie können die Zoomebene festlegen, die Karte an einem bestimmten Ort zentrieren und den angezeigten MAP -Typ auswählen. Sie können auch Marker, Info -Windows und Event -Hörer zur Karte hinzufügen. Alle diese Anpassungen können in der JavaScript -Datei durchgeführt werden, in der Sie die Karte initialisieren.

Wie kann ich der Karte Marker hinzufügen? .Maps.Marker -Klasse und Angabe der Positions- und Kartenoptionen im Konstruktor. Die Positionsoption sollte ein Google.maps.latlng -Objekt sein, das die geografischen Koordinaten des Markers darstellt. Die MAP -Option sollte das Google.Maps.map -Objekt sein, das die Karte darstellt, in der der Marker angezeigt werden soll. Die Markierungen durch Erstellen einer neuen Instanz der Google.maps.infowindow -Klasse und der Angabe der Inhaltsoption im Konstruktor. Die Inhaltsoption sollte eine Zeichenfolge sein, die den HTML -Inhalt darstellt, der im Info -Fenster angezeigt werden soll. Anschließend können Sie mit der Öffnen Sie das Info -Fensterobjekt zum Anzeigen des Info -Fensters, wenn der Marker klickt. Zu den Markierungen hinzugefügt, indem die addlistener -Methode der Google.maps.Event -Klasse verwendet wird. Das erste Argument der AddListener -Methode sollte das Markierungsobjekt sein, das zweite Argument sollte der Name des Ereignisses sein, und das dritte Argument sollte die Funktion sein, die ausgeführt wird, wenn das Ereignis auftritt.

Wie kann ich ändern Der angezeigte MAP -Typ? Die Option MAPTYPEID sollte einer der folgenden Werte sein: google.maps.maptypeid.Roadmap, google.maps.maptypeid.satellite, google.maps.maptypeid.hybrid oder google.maps.maptyped.terrain.

Wie kann ich die Zoomebene der Karte festlegen? Die Zoomoption sollte eine Zahl sein, die die Zoomebene darstellt. Je höher die Zahl, desto näher der Zoom.

Wie kann ich die Karte an einem bestimmten Ort zentrieren? Objekt. Die Center -Option sollte ein Google.maps.latlng -Objekt sein, das die geografischen Koordinaten des Standorts darstellt.

Wie kann ich den API -Schlüssel für Google Maps erhalten? von der Google Cloud -Plattformkonsole erhalten werden. Sie müssen ein neues Projekt erstellen, die Google Maps JavaScript -API aktivieren und einen neuen API -Schlüssel erstellen. Verwenden Sie mit der adddomListener -Methode der Google.Maps.Event -Klasse. Das erste Argument der adddomListener -Methode sollte das Fensterobjekt sein, das zweite Argument sollte das Ereignis „Fehler“ sein, und das dritte Argument sollte die Funktion sein, die ausgeführt wird, wenn der Fehler auftritt.

Das obige ist der detaillierte Inhalt vonHinzufügen von Markierungen zu einer Karte mit der Google Maps -API und dem JQuery -Artikel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!