Share
Sie haben eine glänzende neue Website entworfen. Sorgfältige Auswahl der Farben, der Typografie und der Fotos, um das Branding des Unternehmens perfekt wiederzugeben. Dann bittet Sie Ihr Kunde, eine Karte hinzuzufügen. Sicher, Sie könnten einen Assistenten für die Kartenerstellung verwenden, z. B. den mit jedem Google-Konto. Aber seien wir ehrlich, ihre Funktionalität ist begrenzt und sie sehen ziemlich allgemein aus!
Die Google Maps-API gibt Ihnen dagegen die Freiheit, vollständig angepasste Karten zu erstellen, die alle möglichen coolen Dinge erledigen können. Die Portsmouth History Map ist eine Site, die ich kürzlich mit dieser API erstellt habe.
Diese Serie von Lernprogrammen zeigt Ihnen, wie Sie mithilfe der Google Maps-API benutzerdefinierte Karten erstellen. Es geht darum, sich die Hände mit etwas JavaScript schmutzig zu machen, aber es lohnt sich.
Die Tutorials behandeln alle möglichen Dinge. Um nur einige zu nennen: benutzerdefinierte Kartenfarben, Menüs und Markierungen; Erwecken Sie Ihr eigenes Kartendesign (z. B. eine handgezeichnete Karte) zum Leben, indem Sie es einer zoombaren Google-Karte überlagern. Anbindung an die Flickr-API; Bildoptimierung; sich anpassendes Design; Code-Optimierung und -Validierung. Oder mit anderen Worten: Wenn Sie fertig sind, können Sie nicht nur schöne Karten erstellen, sondern Sie haben auch viele Dinge betrachtet, die für das Erstellen einer Website relevant sind.
Diese Tutorials verwenden das Szenario eines britischen Unternehmens, das Musikfestivals fördert. Das Bild "Endprodukt" oben zeigt, was wir anstreben. Schauen Sie sich die Demo an.
Hinweis: Nur der Glastonbury-Marker ist in diesem Beispiel "aktiv".
Bevor Sie beginnen, möchten Sie möglicherweise die mit diesem Tutorial verknüpften Dateien herunterladen. Ich habe für jede Aktivität eine eigene HTML-Datei beigefügt.
Eine API oder Application Programming Interface (API) oder Application Programming Interface (Anwendungsprogrammierschnittstelle) ist eine fantastische Art, einen Satz von Befehlen (z. B. Funktionen) zu veröffentlichen, die ein Unternehmen (z. B. Facebook, Twitter, You Tube, Google) veröffentlicht. Die Idee ist, dass Sie diese Befehle verwenden können, um eine stark angepasste Version ihres Inhalts zu erstellen. Im Fall der Google Maps-API sind beispielsweise "Inhalte" die Karten, während im Falle der Flickr-API "Inhalte" die Fotos sind.
Wenn Leute über "Mash-ups" sprechen, meinen sie, dass sie die API von zwei oder mehr Unternehmen zum Kombinieren von Inhalten verwendet haben, zum Beispiel, Bilder von Flickr auf einer Google-Karte erscheinen zu lassen. Es gibt buchstäblich Tausende dieser APIs; Weitere Informationen finden Sie unter Programmierbares Web.
In einem späteren Tutorial werden wir uns die Flickr-API ansehen. Zunächst werden wir uns jedoch auf die Google Maps-API konzentrieren. Auf diese Weise können Sie alle möglichen Dinge tun, einschließlich der Anpassung der Farben, der Map-Marker, des Popup-Box-Stils, der Detailebene und der Zoomstufe. Ganz zu schweigen davon, dass die Karte ein paar coole Dinge bewirkt, wie das Anzeigen von Live-Daten, das Gruppieren von Markern, das Planen von Routen, das Zeichnen von benutzerdefinierten Überlagerungen, das dynamische Aufdecken von Daten ... die Liste ist endlos!
Um das Offensichtliche aufzuzeigen, benötigen Sie ein Google-Konto. Wenn Sie noch keine haben, gehen Sie zu Google und melden Sie sich an.
Bewaffnet mit Ihrem Google-Konto können Sie jetzt die Google Maps-API-Seiten aufrufen. Ein Lesezeichen auf diese Seite setzen; Sie werden sehr vertraut damit. Die Hauptbereiche sind:-
Bevor Sie fortfahren, benötigen Sie auch einen API-Schlüssel (eine lange, für Sie eindeutige Folge von Buchstaben und Zahlen). Holen Sie sich hier Ihren API-Schlüssel.
OK, du kannst mit dem Bauen beginnen.
Ersetzen Sie an der Stelle, an der es steht, "YOUR_API_KEY_GOES_HERE" durch Ihren eigenen API-Schlüssel, damit die bereitgestellte Karte funktioniert. Ihre Karte sollte der oben gezeigten Karte ähneln.
Das grundlegende Prinzip des Codes besteht darin, dass er ein div erstellt (genannt Festival-Karte) in das JavaScript die Karte lädt. Ich habe im Code Kommentare hinzugefügt, um zu erklären, wie es funktioniert, aber es lohnt sich, die wichtigsten Bits hervorzuheben.
Der Code deklariert Ihre Anwendung zuerst mit der Doctype-Deklaration als HTML5 .
Dann wird der Stil für die Karte festgelegt. die Bits zwischen den Stichworte. Sie können das Styling an der anpassen # Festival-Karte id abhängig davon, wo Sie Ihre Karte ablegen möchten. Wenn Sie eine Karte im Vollbildmodus wünschen, stellen Sie Breite und Höhe auf 100% ein und entfernen Sie die Ränder.
Wenn Sie das JavaScript kurz überspringen, wird der Code zwischen den body-Tags ein leeres html-Objekt, d. H. Ein div (Festival-Karte) um die Karte zu halten. Dies dient als eine Art Platzhalter, in den JavaScript die Karte lädt.
OK - jetzt mit Blick auf JavaScript - verbindet sich der Code zuerst mit Ihrem Google Maps-API-Schlüssel.
Anschließend wird das JavaScript gestartet, mit dem die Karte erstellt wird. Schnelle Erinnerung: JavaScript-Funktionen (z. loadFestivalMap) sind eine Reihe von Befehlen, die nur ausgeführt werden, wenn sie von einem anderen Code aufgerufen werden. Das mag kompliziert aussehen, aber eigentlich nur ein paar Dinge tun -
Accentsconagua
festivalMapOptions) der Karte (z. B. Breitengrad und Längengrad, Zoomstufen usw.) und eine leere JavaScript-Variable (festivalMap) erstellt, dem die Karte in Kürze zugewiesen wird. (Tipp: itouchmap ist eine praktische Seite zum Nachschlagen der Breiten- und Längenkoordinaten eines beliebigen Ortes.)loadFestivalMap Funktion wird durch diese Zeile ausgelöst:google.maps.event.addDomListener (Fenster, 'load', loadFestivalMap); festivalMap). Dabei wendet er auch die Konfigurationsoptionen an und lädt die Karte in die Festival-Karte div erstellt, um es zu halten.loadMapMarkers Funktion wird durch die letzte Zeile des Befehls ausgeführt loadFestivalMap Funktion.Wenn dies keinen Sinn macht, lesen Sie die Kommentare in der Vollversion des Codes, um sie näher zu erläutern.
Inzwischen sollten Sie eine Karte haben, und mit etwas Glück waren Sie von dem JavaScript nicht so verwirrt! Wenn alles gut ist, können wir die Karte ein bisschen interessanter aussehen lassen.
Es ist einfach, eigene Bilder als Kartenmarkierungen zu verwenden. Auf ähnliche Weise wie Sie Eigenschaftenoptionen für die Karte selbst festlegen (z. Mitte, Zoom usw. wie oben beschrieben), können Sie auch die Eigenschaften der Kartenmarkierungen ändern. Um ein anderes Bild als Kartenmarkierung zu verwenden, müssen Sie nur das Bild einstellen Symbol Eigentum Ihrer Kartenmarkierungen. (Bei Interesse listet der Google Maps-API-Abschnitt alle Eigenschaften, Methoden und Ereignisse der Kartenmarkierung, die Sie verwenden können.).
In der Regel handelt es sich bei den Kartenmarkierungen um .pngs, da sie eine unregelmäßige Form mit transparentem Hintergrund ermöglichen.
Wir müssen auch den "anklickbaren" Bereich für jede Markierung festlegen, um sicherzustellen, dass das "image" -Bit des .png anklickbar ist und das transparente Bit nicht. Dies ist sehr wichtig, wenn sich die Marken überschneiden.
Sie erstellen zuerst das Kartensymbolbild (markerIconGlastonbury) und erstellen Sie dann die Form des Kartensymbols (markerShapeGlastonbury), und schließlich verknüpfen Sie beide mit Ihrer Kartenmarkierung (markerGlastonbury).
// Einstellen der Position der Glastonbury-Kartenmarkierung. var markerPositionGlastonbury = new google.maps.LatLng (51.159803, -2.585585); // Festlegen des Symbols, das mit der Glastonbury-Kartenmarkierung verwendet werden soll. var markerIconGlastonbury = url: 'icons / icon_glas_uk.png', // Die Bilddatei der Größe. size: new google.maps.Size (225, 120), // Der Punkt auf dem Bild, von dem aus der Anker gemessen werden soll. 0, 0 ist oben links. origin: new google.maps.Point (0, 0), // Die x-y-Koordinaten des Ankerpunkts auf der Markierung. z.B. Wenn Ihre Kartenmarkierung eine Reißnadel ist, ist der Anker die Spitze der Nadel. anchor: new google.maps.Point (189, 116); // Festlegen der Form, die mit der Glastonbury-Kartenmarkierung verwendet werden soll. var markerShapeGlastonbury = coord: [12,4,216,22,212,74,157,70,184,111,125,67,6,56], Typ: 'Poly'; // Erstellen der Glastonbury-Kartenmarkierung. markerGlastonbury = new google.maps.Marker (// verwendet die oben festgelegte Position. position: markerPositionGlastonbury, // fügt die Markierung der Karte hinzu. map: festivalMap, Titel: 'Glastonbury Festival') // weist das oben festgelegte Symbolbild zu Symbol: markerIconGlastonbury, // ordnet die oben festgelegte Symbolform dem Marker zu. shape: markerShapeGlastonbury, // setzt den Z-Index der Kartenmarkierung. zIndex: 102);
Sie können die vollständige HTML-Datei von oben auf dieser Seite herunterladen oder sich die Live-Version ansehen. Im Moment habe ich nur eine Kartenmarkierung hinzugefügt ... natürlich werde ich in Kürze noch mehr hinzufügen!
Hinweis: Um die Koordinaten der Kartensymbolform zu erhalten, füge ich das Symbolbild in Dreamweaver in eine temporäre Webseite ein und verwende dann das Polygon-Hotspot-Tool, um die Koordinaten abzurufen, und kopiere diese Koordinaten dann zurück in meine Hauptkartenseite.Elemente wie Kartenmarkierungen können sowohl X-, Y- als auch Z-Koordinaten haben. Der Z-Index ist die Tiefe. Sie bestimmt, wie Elemente übereinander gestapelt werden und wie sie sich überlappen.
Wenn die x- und y-Koordinaten eines Elements gleich sind, werden Elemente mit höheren Z-Indizes über Elementen mit niedrigeren Z-Indizes angezeigt. (Z-Index funktioniert nur bei positionierten Elementen, z. B. relativ, fest oder absolut).
Bisher sieht die Karte in Ordnung aus, da die Google Maps-API standardmäßig dazu führt, dass Elemente, die unten im Bildschirm erscheinen, einen höheren Z-Index aufweisen, sodass sie oberhalb von Elementen etwas weiter oben auf dem Bildschirm angezeigt werden. Z.B. Das Isle of Wight-Symbol befindet sich oben auf den Glastonbury- und Reading Festival-Symbolen (siehe Abbildung unten)..
In diesem Lernprogramm wird später beschrieben, wie Sie die Z-Indizes ändern können, um die Anzeige der Kartenmarkierungen zu ändern.
Obwohl die Karte langsam Gestalt annimmt, passt die Standardkarte nicht wirklich zu dem Gesamteffekt, den ich erzielen möchte. Glücklicherweise ist es sehr einfach, mithilfe der API-Stiloptionen das Aussehen der Karte anzupassen.
Ich sollte an dieser Stelle auch sagen, dass ich mir ein paar Musikfestivals genommen habe, um dieses Beispiel zu veranschaulichen. Dies war etwas zufällig und meine Auswahl spiegelt nicht meine Meinung wider - weder für noch gegen Festivals!
Verwenden Sie den JSON-Assistenten, um zu ermitteln, wie Ihre Karte aussehen soll. Sie können die Farben von so ziemlich allem ändern, Details hinzufügen und entfernen, die Farbfüllung und -geometrie unabhängig voneinander einstellen usw. Es lohnt sich, sich ein wenig Zeit zu nehmen, um sich mit der Funktionsweise zu beschäftigen. (Falls Sie sich fragen, ist JSON nur eine Möglichkeit, Informationen zu formatieren, damit ein Computer sie lesen kann.)
Wenn Sie mit dem in der Vorschau des JSON-Assistenten angezeigten Stil zufrieden sind, klicken Sie auf JSON anzeigen Taste und kopieren Sie den Code.
Gehen Sie zurück zu Ihrem HTML-Dokument, fügen Sie direkt nach dem eröffnenden JavaScript-Tag eine Variable hinzu, die diese Informationen enthalten soll, und fügen Sie anschließend den Code ein.
// Zuerst lesen wir den Datenbeschreibungsstil ein. var style_festival = ["featureType": "administrative", "stylers": ["Sichtbarkeit": "aus"], "featureType": "poi", "stylers": ["Sichtbarkeit": " off "], " featureType ":" Transit "," Stylers ": [" Sichtbarkeit ":" Off "], " FeatureType ":" Straße "," Stylers ": [" Sichtbarkeit " : "off"], "featureType": "landscape", "stylers": ["color": "# FFE200"], "featureType": "water", "stylers": [ "Sichtbarkeit": "Ein", "Farbe": "# 4f92c6"]];
Sie benötigen Ihre Karte, um die gerade hinzugefügten Informationen als Kartenstil zu behandeln. Benutzen StyledMapType um dies zu tun.
// Dann verwenden wir diese Daten, um die Stile zu erstellen. var styled_festival = new google.maps.StyledMapType (style_festival, name: "Festival style");
Schließlich müssen Sie Ihrer Karte Ihren neuen Stil zuweisen, um den Stil zu "aktivieren".
festivalMap.mapTypes.set ('map_styles_festival', styled_festival); festivalMap.setMapTypeId ('map_styles_festival'); Verwenden Sie den Link am Anfang dieses Tutorials, um eine Kopie des Codes für die bisherige Karte herunterzuladen, oder werfen Sie einen Blick auf die Live-Demo für diesen Teil des Tutorials. Ich habe tatsächlich zwei Stile hinzugefügt. Eine wird sofort aktiviert und die andere wird aktiviert, wenn die Karte vergrößert wird, um mehr Details zu erhalten. (Dies wird weiter unten erklärt.)
Ich konnte auch nicht widerstehen, an dieser Stelle einen Hintergrund hinzuzufügen :) Schauen Sie sich das an Karosserie css selector um zu sehen, wie ich das gemacht habe.
Okay, jetzt ist es an der Zeit, dass die Karte tatsächlich etwas bewirkt! Sie können die integrierte Info-Fenster-Überlagerung verwenden, aber sie sehen nicht aus Fantastisch und sie können nicht leicht angepasst werden. Stattdessen verwenden wir die Infobox-Bibliothek.
Laden Sie eine Kopie der Infobox-Bibliothek herunter. Entpacken Sie es und speichern Sie es in einem Ordner in der Nähe Ihrer Karte. Fügen Sie dann diese Zeile am oberen Rand Ihrer HTML-Datei hinzu.
Fügen Sie für jede Kartenmarkierung Z-Indizes hinzu, so dass diejenigen, die sich am unteren Rand des Bildschirms befinden, über den höher gelegenen angezeigt werden. (d. h. je näher ein Marker am unteren Rand des Bildschirms ist, desto höher sollte sein Z-Index sein.) Alles wird später bekannt gegeben, warum Sie dies tun! Zum Beispiel -
// Erstellen der Glastonbury-Kartenmarkierung. markerGlastonbury = new google.maps.Marker (// verwendet die oben festgelegte Position. position: markerPositionGlastonbury, // fügt die Markierung der Karte hinzu. map: festivalMap, Titel: 'Glastonbury Festival') // weist das oben festgelegte Symbolbild zu Symbol: markerIconGlastonbury, // weist der Markierung die oben angegebene Symbolform zu. shape: markerShapeGlastonbury, // setzt den Z-Index der Kartenmarkierung. zIndex: 107);
Fügen Sie nach jeder Kartenmarkierung den folgenden Code hinzu. Bitte lesen Sie die Kommentare im Code, um zu sehen, was er tut.
// Erzeugt die Informationen für die Popup-Infobox. var boxTextGlastonbury = document.createElement ("div"); boxTextGlastonbury.style.cssText = pop_up_info; boxTextGlastonbury.innerHTML = '
'; // Legt die Konfigurationsoptionen der Popup-Infobox fest. var infoboxOptionsGlastonbury = content: boxTextGlastonbury, disableAutoPan: false, maxWidth: 0, pixelOffset: new google.maps.Size (-241, 0), zIndex: null, boxStyle: background: "url ('infobox / pop_up_box_top_arr.png' ) no-repeat ", Deckkraft: 1, Breite:" 430px ", closeBoxMargin:" 10px 2px 2px 2px ", closeBoxURL:" icons / button_close.png ", infoBoxClearance: new google.maps.Size (1, 1), isHidden: false, Bereich: "floatPane", enableEventPropagation: false; // Erstellt die Popup-Infobox für Glastonbury und fügt die oben festgelegten Konfigurationsoptionen hinzu. InfoboxGlastonbury = neue InfoBox (InfoboxOptionsGlastonbury); // Fügen Sie der Glastonbury-Kartenmarkierung einen "Ereignis-Listener" hinzu, um darauf zu achten, wenn darauf geklickt wird. google.maps.event.addListener (markerGlastonbury, "click", function (e) // Öffnen Sie das Infobox von Glastonbury. infoboxGlastonbury.open (festivalMap, this); // Ändert die Z-Index-Eigenschaft des Markers, um die Marker wird über anderen Markierungen angezeigt. this.setZIndex (google.maps.Marker.MAX_ZINDEX + 1); // zoomt die Karte. setZoomWhenMarkerClicked (); // Legt den Glastonbury-Marker als Mittelpunkt der Karte fest. festivalMap.setCenter (markerGlastonbury.getPosition ());); In dem obigen Code haben Sie die Funktion aufgerufen setZoomWhenMarkerClicked. Dadurch wird die Karte vergrößert, wenn eine Person auf eine Markierung klickt. Es wird jedoch nicht viel passieren, bis Sie diese Funktion erstellt haben! Dies ist die Funktion, die Sie erstellen müssen -
function setZoomWhenMarkerClicked () var currentZoom = festivalMap.getZoom (); if (currentZoom < 7) festivalMap.setZoom(7);
Wenn die Karte vergrößert wird, besteht die Möglichkeit, dass Sie mehr Details auf Ihrer Karte anzeigen möchten. Dazu fügen Sie einen Ereignis-Listener hinzu und verwenden das getZoom Methode, um ständig zu prüfen, ob der Zoom geändert wurde. Wenn es erhöht wurde (über Stufe 6), wird die setMapTypeId Diese Methode wird verwendet, um den zweiten (detaillierteren) Stil festzulegen, der oben definiert wurde.
// Hört ständig nach, wenn sich die Zoomstufe ändert. Dies gilt auch, wenn die Karte vergrößert wird, wenn auf eine Markierung geklickt wird. google.maps.event.addListener (festivalMap, "zoom_changed", function () var newZoom = festivalMap.getZoom (); // Wenn die Karte vergrößert wird, wechseln Sie zu dem Stil, der die höhere Detailebene anzeigt. if (newZoom> 6) festivalMap.setMapTypeId ('map_styles_festival_zoomed'); // Ansonsten muss die Karte verkleinert werden. Verwenden Sie also den Stil mit der niedrigeren Detailebene. else festivalMap.setMapTypeId ('map_styles_festival'); ); Gestalten Sie Ihre Infobox mit der CSS, damit sie hübsch aussieht.
// Variable, die den Stil für die Popup-Infobox enthält. var pop_up_info = "border: 0px solid black; Hintergrundfarbe: #ffffff; padding: 15px; margin-top: 8px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px ; Box-Schatten: 1px 1px # 888; ";
Wenn eine Infobox geöffnet wurde, wird die Kartenmarkierung in den Vordergrund gebracht. Wenn Sie jedoch die Infobox schließen und die Karte dann in ihre ursprüngliche Position herauszoomen, bleibt die Markierung vorne. Das kann komisch aussehen.
In Schritt 1 legen Sie den Z-Index für jede Marke fest. Sie können dies jetzt verwenden, um dieses Problem zu beheben. Sie müssen eine Funktion erstellen (z. B.. resetZindexes) das setzt die Z-Indizes auf ihre ursprünglichen Werte zurück und fügt dieser Funktion dann einen Aufruf hinzu (d. h. resetZindexes ();) auf infobox.js, um die Funktion auszulösen, wenn das Infobox-Fenster geschlossen wird.
Klicken Sie auf den Link oben auf dieser Seite, um eine Kopie des Codes für die bisherige Website zu erhalten, oder sehen Sie sich die Live-Version des aktuellen Standorts an. Ich habe nur das Popup für Glastonbury hinzugefügt. Fühlen Sie sich frei, die anderen selbst hinzuzufügen!
Wir sind fast dabei, das Aussehen der Karte anzupassen, aber bevor wir sie als Tag bezeichnen, sollten wir ein paar Navigationssteuerungen hinzufügen.
Google maps verfügt über 12 Bereiche, in denen Sie Kartensteuerelemente, Banner usw. hinzufügen können. Sie können diese Bereiche vollständig anpassen und beliebige HTML-Dateien usw. hinzufügen.
Wir werden auf der rechten Seite der Karte ein benutzerdefiniertes Banner und eine eigene Navigation hinzufügen.
Definieren Sie zunächst eine Funktion zum Erstellen des Menüs. Dieser Code-Auszug ist ziemlich lang ...
// Funktion, die den Bedienfeldbereich erstellt, dh. Der Kartentitel und die beiden Tasten darunter. Funktion createControlPanel (controlPanelDiv) controlPanelDiv.style.padding = '0px'; controlUI = document.createElement ('div'); controlUI.style.border = '0px durchgehend weiß'; controlUI.style.margin = '10px'; controlUI.style.paddingTop = '11px'; controlUI.style.paddingBottom = '5px'; controlUI.style.paddingLeft = '0px'; controlUI.style.paddingRight = '0px'; controlUI.style.width = '245px'; controlUI.style.height = '419px'; controlPanelDiv.appendChild (controlUI); // Map title titleBar = document.createElement ('div'); titleBar.style.backgroundColor = '# 89CBED'; titleBar.style.height = '255px'; titleBar.style.width = '245px'; titleBar.style.marginTop = '0px'; titleBar.style.marginBottom = '0px'; titleBar.style.marginLeft = '0px'; titleBar.style.marginRight = '0px'; titleBar.style.paddingTop = '6px'; titleBar.style.paddingBottom = '2px'; titleBar.style.paddingLeft = '0px'; titleBar.style.paddingRight = '0px'; titleBar.style.borderTopLeftRadius = '5px'; titleBar.style.borderTopRightRadius = '5px'; titleBar.style.borderBottomLeftRadius = '0px'; titleBar.style.borderBottomLeftRadius = '0px'; titleBar.style.cssFloat = 'left'; titleBar.innerHTML = '
'; controlUI.appendChild (titleBar); yellowStripe = document.createElement ('div'); yellowStripe.style.backgroundColor = '# FFFF00'; yellowStripe.style.height = '2px'; yellowStripe.style.width = '245px'; yellowStripe.style.marginTop = '3px'; yellowStripe.style.marginBottom = '3px'; yellowStripe.style.marginLeft = '0px'; yellowStripe.style.marginRight = '0px'; yellowStripe.style.paddingTop = '0px'; yellowStripe.style.paddingBottom = '0px'; yellowStripe.style.paddingLeft = '0px'; yellowStripe.style.paddingRight = '0px'; yellowStripe.style.cssFloat = 'left'; yellowStripe.style.fontFamily = 'Georgia, serif'; yellowStripe.style.fontSize = '14px'; controlUI.appendChild (yellowStripe); // Schaltfläche "Kleinere" Ereignisse. smallEvents = document.createElement ('div'); smallEvents.style.height = '108px'; smallEvents.style.width = '129px'; smallEvents.style.marginTop = '0px'; smallEvents.style.marginBottom = '0px'; smallEvents.style.marginLeft = '0px'; smallEvents.style.marginRight = '0px'; smallEvents.style.paddingTop = '0px'; smallEvents.style.paddingBottom = '2px'; smallEvents.style.paddingLeft = '0px'; smallEvents.style.paddingRight = '0px'; smallEvents.style.cssFloat = 'left'; smallEvents.innerHTML = '
'; controlUI.appendChild (smallEvents); // Schaltfläche "Umbrella" brolly = document.createElement ('div'); brolly.style.height = '149px'; brolly.style.width = '94px'; brolly.style.marginTop = '0px'; brolly.style.marginBottom = '0px'; brolly.style.marginLeft = '0px'; brolly.style.marginRight = '0px'; brolly.style.paddingTop = '0px'; brolly.style.paddingBottom = '2px'; brolly.style.paddingLeft = '0px'; brolly.style.paddingRight = '0px'; brolly.style.cssFloat = 'left'; brolly.innerHTML = '
'; controlUI.appendChild (brolly); Kurze Anmerkung zu Stilen: Der obige Code verwendet die Stil Eigenschaft eines Elements zur Definition seiner Stile mithilfe von JavaScript. Um CSS-Eigenschaften in ihre JavaScript-Notation zu konvertieren, müssen Sie nur daran denken, dass Eigenschaften, die keinen Bindestrich enthalten, gleich bleiben, während die mit einem Bindestrich in camelCase konvertiert werden, z. Hintergrundbild wird Hintergrundbild. Die Ausnahme ist schweben, was wird cssFloat.
Erstellen Sie dann ein div für das Menü und fügen Sie das Menü zu diesem div hinzu, indem Sie die gerade in Schritt 1 erstellte Funktion aufrufen.
// Erstellen Sie ein Kontrollfeld (z. B. Site-Titel und 2 Schaltflächen), das auf der rechten Seite angezeigt wird. var controlPanelDiv = document.createElement ('div'); var festivalMapControlPanel = new createControlPanel (controlPanelDiv, festivalMap); Dann stellen Sie das ein Kontrollen Eigenschaft Ihrer Karte, um das Menü in diesem Fall dem entsprechenden Ort hinzuzufügen RECHTS OBEN.
// Das Control Panel und die Reset-Schaltfläche (zuvor erstellt) zur Karte hinzufügen. festivalMap.controls [google.maps.ControlPosition.RIGHT_TOP] .push (controlPanelDiv);
Inzwischen sollten Sie etwas haben, das wie ein benutzerdefiniertes Menü auf der rechten Seite Ihrer Karte aussieht. Jetzt müssen Sie nur noch Ihr Menü dazu bringen, etwas zu tun…
Im Verlauf der nächsten Tutorials erhalten Sie die Schaltfläche "Kleinere Ereignisse", um Fotos von Flickr anzuzeigen, und die Schaltfläche "Regenschirm", um eine skizzierte Niederschlagskarten-Überlagerung anzuzeigen. (Ein Klischee, das ich kenne, aber in den Sommermonaten regnet es hier ziemlich viel!)
Um etwas in diesem Tutorial zum Laufen zu bringen, habe ich die obigen Schritte wiederholt, um auch einen Reset-Button hinzuzufügen RECHTS UNTEN Bereich. Dies beinhaltet das Umhüllen von Code um die Reset-Taste, um den Code aufzurufen HandelAnforderungen Funktion.
// Funktion, die die Schaltfläche 'Reser Map' erstellt. function createResetButton (resetButtonDiv) resetButtonDiv.style.padding = '0px'; controlUI2 = document.createElement ('div'); controlUI2.style.backgroundColor = '#ffffff'; controlUI2.style.borderRadius = '5px'; controlUI2.style.margin = '10px'; controlUI2.style.paddingTop = '2px'; controlUI2.style.paddingBottom = '2px'; controlUI2.style.paddingLeft = '2px'; controlUI2.style.paddingRight = '5px'; controlUI2.style.textAlign = 'center'; controlUI2.style.width = '148px'; controlUI2.style.height = '31px'; controlUI2.innerHTML = '
'; resetButtonDiv.appendChild (controlUI2); Das HandelAnforderungen Funktion macht ein paar Dinge - schauen Sie sich die Kommentare im Code an.
// Funktion, die aufgerufen wird, wenn auf die Schaltflächen "kleinere Ereignisse", "Unbrella" oder "Karte zurücksetzen" geklickt wird. function handelRequests (buttonPressed) if (buttonPressed === "reset") // Setzt den Zoom, die Kartenposition und die Marker-Z-Indizes auf ihre ursprüngliche Position zurück. Schließt auch alle aktuell geöffneten Infoboxen. festivalMap.setZoom (festivalMapZoom); festivalMap.setCenter (festivalMapCenter); resetZindexes (); // Diese Funktion habe ich erstellt und schließt alle geöffneten Infoboxen. closeAllInfoboxes (); else if (buttonPressed === "small_events") alert ("Diese Schaltfläche wird in einem späteren Tutorial etwas Nützliches bewirken!"); else if (buttonPressed === "rain") alert ("Diese Schaltfläche wird in einem späteren Tutorial etwas Nützliches bewirken!"); Sie können eine vollständige Kopie der HTML-Datei für diesen Teil des Lernprogramms von oben auf dieser Seite abrufen oder das Live-Beispiel anschauen. In diesem Beispiel ist nur die Glastonbury-Kartenmarkierung aktiv.
Das wars für dieses Tutorial! Hoffentlich haben Sie jetzt etwas, das vage dem Bild oben auf dieser Seite ähnelt. Wenn etwas schief gelaufen ist, schauen Sie sich die auf GitHub verfügbaren herunterladbaren Dateien an. Ich habe den Code für jeden Teil dieses Tutorials in separate Dateien eingefügt, sodass Sie herausfinden können, wo alles schiefgegangen ist.
Im nächsten Lernprogramm wird erläutert, wie Sie die Google Maps-API verwenden können, um Ihre eigenen Karten (z. B. eine handgezeichnete oder historische Karte) zum Leben zu erwecken und sie zoombar und interaktiv zu machen.
Die in diesem Tutorial verwendeten Fotos wurden alle unter der Creative Commons-Lizenz veröffentlicht.
