Mit dem WordPress-Plugin von Mapsvg k?nnen Sie schnell und einfach mit interaktive Karten erstellte Funktionen erstellen. Interaktive Karten sind eine h?ufige Voraussetzung für Projekte, wenn Sie die Auswirkungen eines bestimmten Standorts visualisieren müssen. Wenn Sie bereits WordPress verwenden, ist dieses leistungsstarke Plugin m?glicherweise Ihre L?sung, um Karten zu erstellen, die in Produktion gestellt werden k?nnen.

Erinnern Sie sich an Ihre letzte Erfahrung mit der Implementierung oder Planung einer interaktiven Karte. Sie k?nnen sch?tzen, dass es viel Zeit dauert, Daten aus der ursprünglichen Quelle in JSON zuzuordnen und sie dann mit einem visuellen Framework (z. B. D3) zu verbinden. Als n?chstes zu konfigurieren, wie Benutzer mit der Karte selbst interagieren. Dies sind ziemlich viele Entwicklungsbemühungen.

Als n?chstes ist eine Frage zur Verwaltung von Kartendaten. Werden die Daten in einer externen Datei gespeichert? Muss ich die API regelm??ig anrufen, um Daten zu erhalten? Das Verwalten dieser Daten direkt im WordPress -Administratorbereich Ihrer Website ist viel einfacher, genau wie das Verwalten aller anderen Website -Inhalte. Sie müssen den Code -Editor nicht ?ffnen und die Karte separat verwalten!

Diese zusammen mit vielen anderen gemeinsamen Kartenfunktionen werden in das Mapsvg -Plugin integriert, in dem Sie mehrere eindeutige Karten erstellen k?nnen, die Ihren visuellen Anforderungen entsprechen. Wir werden in dieses Plugin eingraben und es verwenden, um eine interaktive SVG-basierte Karte in WordPress zu erstellen.

Optionen zum Erstellen einer neuen Karte

Nach der Installation bietet MapsVG fünf Optionen, um neue Karten basierend auf den Funktionen von Vektor-, Image- oder Google Maps -Funktionen zu erstellen. Für den Zweck dieses Artikels werde ich mich auf die SVG -Funktionalit?t konzentrieren.

Bei der neuen SVG -Kartenoption gibt es fast 200 geocalibrierte und unkalibrierte L?nder- und Region Vektorkarten. Mit Mapsvg Lite, einer kostenlosen Version dieses Plug-Ins k?nnen Site-Administratoren interaktive Karten mit Tooltips, anpassbaren Details und Markierungen erstellen, die über Leitungs- und L?ngengradkoordinaten platziert werden. Das Upgrade auf die kostenpflichtige Version (46 USD) bietet den folgenden Unterstützung: Kartenkatalog, integrierte Suche, Standortfilter, detaillierte Ansicht der Kartenbereiche, Integration mit WordPress -Artikeln und erweiterten benutzerdefinierten Feldern, benutzerdefinierten Tooltips und Konturkarten sowie anderen erweiterten Funktionen.

Erstellen Sie eine neue Karte

Ok, wir haben uns entschieden, eine neue SVG-basierte Karte zu erstellen. W?hlen Sie aus dem Dropdown-Menü eine Option, um eine Vektorkarte zu erstellen. W?hlen Sie nach M?glichkeit eine geocalibrierte Karte anstelle einer unkalibrierten Karte. Geocalibrationskarte mit dem Regionstitel aktualisiert. Darüber hinaus k?nnen Sie Kartenmarkierungen durch geografische Koordinaten (d. H. L?ngengrad und Breitengrad) hinzufügen oder Adressen eingeben, die automatisch in Koordinaten konvertiert werden.

Wenn Sie eine eigene benutzerdefinierte SVG -Datei verwenden, w?hlen Sie die Option SVG hochladen . Nach dem Hochladen wird Ihre benutzerdefinierte Datei im neuen SVG-Karte im Dropdown-Menü unter <kbd>user-uploads/your-file-name.svg</kbd> angezeigt. Bevor Sie die Datei auf die Plugin -Karte hochladen, schlage ich vor, dass Sie einige zus?tzliche Schritte ausführen, um die Datei zu optimieren:

1. Bereiche, die mehrere Vektorwege wie Hawaii enthalten, müssen als zusammengesetzte Pfade im Illustrator gruppiert werden. In Illustrator k?nnen Sie dies tun, indem Sie den relevanten Pfad ausw?hlen und dann zu Object > Composite Pfad > erstellen (oder CMD 8 ).
2. Stellen Sie sicher, dass Ihre Ebene einen klaren, eindeutigen Namen hat. Der Schichtname wird als Bereich für Vorlage und organisatorische Zwecke {{id}} verwendet.
3. ?ffnen Sie anschlie?end Ihre SVG -Datei in einem Texteditor und geben Sie jedem Pfad ein Titelattribut. Dies wird als Bereich in der Vorlage {{Titel}} verwendet.

Die ID- und Titelfelder sind Standardeigenschaften, die aus der Datei extrahiert wurden und sie verwendet haben, um sie mit einzelnen Pfaden zu verbinden. Ausgehend von der neuesten Version des Plugins (aktuell 5.3.7) k?nnen Sie die SVG -Datei direkt im WordPress -Administratorbereich bearbeiten, um die ID- und Titelwerte für jeden Pfad festzulegen, sowie die Pfaddefinition anzupassen und neue Pfade zu zeichnen. Ich pers?nlich bevorzuge die Steuerelemente für die Bearbeitung in Illustrator und Code -Editor, aber dies ist immer noch eine gute Wahl.

Verwenden wir weiterhin die vom Plugin bereitgestellte GeocaliCiRation -Karte und erstellen Sie eine Demo mit dem Eintrag von http://www.miracleart.cn/link/E74B103532A9337CC42F05174AC49D4 in diesem Jahr in diesem Jahr, um die Daten (Teile) der technischen Konferenzen technischer Konferenzen auf die weltweite Welt zu visualisieren.

Kartenstil einstellen

Nachdem wir bereit sind und die SVG -Datei ausw?hlen, ?ffnet die Plugin -Schnittstelle das Einstellungsfeld. Hier setzen wir den Kartennamen, definieren die Gr??e und Gr??e und aktivieren Tooltips und andere Haupteinstellungen.

Zus?tzlich zu der Registerkarte Einstellungen werden auch Registerkarten zur Steuerung und Festlegung bestimmter Kartenfunktionen angezeigt. Wechseln Sie zur n?chsten Registerkartenfarbe , wo wir das Kartenthema festlegen.

Wie oben gezeigt, k?nnen wir die Füll- und Schlaganfallwerte der Karte und die verschiedenen aktiven Zust?nde jedes Pfades steuern. Die Vorteile der Verwendung von vektorbasierten Karten! Wenn ich also eine benutzerdefinierte Kartendatei erstelle, ziehe ich es vor, die Füll- und Schlaganfallwerte wie in Illustrator undefiniert zu lassen. Die Schlaganfallbreite kann jedoch nicht effektiv in der Benutzeroberfl?che angepasst werden (da das SVG bearbeitet und der Wert jedes Pfades ge?ndert werden muss). Daher ist es am besten, sie in Illustrator einzustellen und die Datei erneut zu laden.

Im Folgenden finden Sie die Farboptionen für Container (z. B. Verzeichnisse, Filter, Seitenleisten usw.) sowie die minimalen und maximalen Farbwerte für die Konturkarte (dazu sp?ter mehr!). Containerstile k?nnen auch weltweit in Ihrem Themenstilblatt oder auf der Registerkarte CSS der Einstellungen eingestellt werden.

Setzen Sie Kartendaten

Standardm??ig wird die Registerkarte "Bereich" den Bereich basierend auf dem Pfad des ausgew?hlten SVG vorab, wobei die ID- und Titelwerte angezeigt werden. Sie k?nnen nach Bedarf Ihre eigenen Bereiche bearbeiten und erstellen. Gleiches gilt für die Registerkarte "Datenbank", wo Sie Kartendaten eingeben und mit dem Kartenbereich verknüpfen k?nnen.

Für Zonen- und Datenbankeintr?ge k?nnen Sie ausw?hlen, ob Sie in der Benutzeroberfl?che Felder und Inhalte manuell erstellen oder Daten aus einer CSV -Datei hochladen k?nnen.

Beachten Sie den endgültigen Datensatz im obigen Screenshot, insbesondere die benutzerdefinierten Bereiche für die Besprechungsdetails, die Besprechungsdetails und die Felder, die ein Bild hochladen, das die Flags jedes Landes in der Datenbank zeigt. Wir k?nnen noch einen Schritt weiter gehen, indem wir den Inhalt von der Karte selbst trennen und als Artikeldaten für einen beliebigen WordPress -Post -Typ einziehen. Hier k?nnen erweiterte benutzerdefinierte Felder dazu beitragen, Felder dieser Daten im Artikel -Editor zu erstellen und übermitteltes Daten mit Werten auf der Karte zu assoziieren. Dies ist natürlich nicht notwendig, aber für die Trennung von Bedenken ist es sch?n, diese Option zu haben.

MAP -Daten anzeigen

Wenn Sie Informationen zu Regionen oder Datenbankobjekten auf der Karte anzeigen, müssen wir die Vorlage im Plugin festlegen. Es gibt fünf Arten von Vorlagen: Pop-ups, Tooltips, Details, Verzeichnisse und Tags.

Die Vorlage akzeptiert einfache Text-, HTML- und Lenker -Tags, um Regions- und Datenbankvariablenwerte anzuzeigen. Wenn Sie die Artikeldaten über das Feld "Artikeldatenbank" abrufen, haben Sie Zugriff auf das Standard -WordPress -Feld, post.id, post.post_title, post.post_content, post.url und alle benutzerdefinierten Felder, die mit dieser Syntax erstellt wurden: post.acf.my_field_name. Immer wenn Sie ein reichhaltiges Textfeld (z. B. post.post_content) rendern müssen, müssen Sie Lenker {{{Triple-Stash}}} -Syntax verwenden, um die gerenderte HTML auszugeben.

Durch die Verwendung der Lenkersyntax k?nnen wir bedingte Logik in Vorlagen erstellen, um dynamische Vorlagenansichten basierend auf Region und Datenbankwerten zu erstellen. In Mapsvg 5.0 und sp?ter werden die Vorlagenoptionen mit HTML-Kommentaren und den Start-Tags für die Standardzone und die Datenbankfelder vorgepopuliert. Sehr nützlich!

Fügen Sie einer Seite eine Karte hinzu

Mapsvg enth?lt einen Shortcode zum Einbetten von Karten in eine Seite oder einen Artikel. Platzieren Sie einen Gutenberg -Shortcode -Block auf der Seite und rufen Sie Mapsvg mit der MAP -ID zum Einbetten auf: [Mapsvg].

Für Benutzer, die im klassischen WordPress-Editor arbeiten oder eine Plug-in-Version früher als 5.0 verwenden, wird das MAP-Symbol zur TinyMce-Symbolleiste hinzugefügt, die einen Shortcode in Ihren Artikelinhalt mit einer Karten-ID einflie?t. Die Karten -ID finden Sie im Mapsvg -Editor -Dashboard oder in den oberen Brotkrumen der Aktivit?tskarte. Die praktische Kopie zu Zwischenablage befindet sich neben zwei Instanzen des Shortcode, um sie für die Verwendung im Artikel -Editor zu greifen.

Demo

Nachdem wir die Dateneingabe abgeschlossen und einige zus?tzliche Mapsvg -Einstellungen gewechselt haben, erhalten wir eine voll funktionsf?hige interaktive und reaktionsschnelle Karte! Beachten Sie, dass wir w?hrend dieses Prozesses wenig mit viel Code ausgesetzt sind.

Sehen Sie sich die vollst?ndige Demo an

Jenseits der Karte

Der Vorteil der SVG -Funktionalit?t des Plugins ist, dass SVG im Grunde alles sein kann, was wir wollen. K?nnen Sie interaktive "Karten" von Vektorpfaden fast allem erstellen: architektonische Grundrisse, Infografiken oder interaktive Zeitpl?ne Ihrer Karriere? Es ist mehr als nur eine Karte!

Nicht auf WordPress? Kein Problem. Mapsvg ist auch als JQuery -Plugin erh?ltlich und es lohnt sich auch, interaktive Karten au?erhalb von WordPress zu verwenden.

Ressource

• Mapsvg-Website (einschlie?lich Echtzeitdemonstration der Verwaltungsschnittstelle)
• Mapsvg Tutorial
• Mapsvg -Dokumentation
• Mapsvg Lite (WordPress Plugin -Verzeichnis)
• Mapsvg Video Tutorial Archive (YouTube)

Das obige ist der detaillierte Inhalt vonErstellen interaktiver Karten in WordPress mit Mapsvg. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!