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.
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.
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
<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.
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) { ⋮ }
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.
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 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.
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!