MapsVG WordPressプラグインを使用すると、機能が豊富なインタラクティブマップをすばやく簡単に作成できます。インタラクティブマップは、特定の場所の影響を視覚化する必要がある場合、プロジェクトの一般的な要件です。すでにWordPressを使用している場合、この強力なプラグインは、生産に入れることができるマップを作成するためのソリューションかもしれません。

インタラクティブマップを?qū)g裝または計畫した最後の経験を思い出してください。元のソースからデータをJSONにマップし、それを視覚的なフレームワーク（D3など）に接続するのに多くの時間がかかると推定するかもしれません。次に、ユーザーがマップ自體と対話する方法を構(gòu)成することです。これらは非常に多くの開発努力です。

次は、マップデータを管理する方法についての質(zhì)問です。データは外部ファイルに保存されていますか？データを取得するには、定期的にAPIを呼び出す必要がありますか？このデータをWebサイトのWordPress管理パネルで直接管理することは、他のすべてのWebサイトコンテンツを管理するのと同じように、はるかに簡単です。コードエディターを開いてマップを個別に維持する必要はありません！

これらは、他の多くの一般的なマップ機能とともに、MapsVGプラグインに組み込まれており、視覚的なニーズに合わせて複數(shù)の一意のマップを作成できます。このプラグインを掘り下げ、それを使用して、WordPressでインタラクティブなSVGベースのマップを構(gòu)築します。

新しいマップを作成するオプション

MapsVGは、インストールされると、ベクトル、畫像、またはGoogleマップ機能に基づいて新しいマップを作成する5つのオプションを提供します。この記事の目的のために、SVG機能に焦點を當てます。

新しいSVGマップオプションには、200近くのジオカカリブ化されていない國內(nèi)および地域のベクトルマップがあります。このプラグインの無料バージョンであるMapsVG Liteにより、サイト管理者は、ツールチップ、カスタマイズ可能な詳細ビュー、および緯度および経度座標を介して配置されたマーカーを備えたインタラクティブなマップを作成できます。有料版にアップグレードする（$ 46）は、マップカタログ、統(tǒng)合検索、ロケーションフィルター、マップエリアの詳細なビュー、WordPressの記事と高度なカスタムフィールドとの統(tǒng)合、カスタムツールチップと輪郭マップ、およびその他の高度な機能のサポートを提供します。

新しいマップを作成します

OK、新しいSVGベースのマップを作成することを選択しました。ドロップダウンメニューからオプションを選択して、ベクトルマップを作成します?？赡埭扦ⅳ欷?、非調(diào)整マップの代わりにジオカカラブ化されたマップを選択します。地域のタイトルで更新されたGeocalibrationマップ。さらに、地理的座標（つまり、経度と緯度）によってマップマーカーを追加するか、座標に自動的に変換されるアドレスを入力することでマップマーカーを追加できます。

獨自のカスタムSVGファイルを使用する場合は、 SVGのアップロードオプションを選択します。アップロード後、カスタムファイルは、新しいSVGマップドロップダウンメニューの<kbd>user-uploads/your-file-name.svg</kbd>の下に表示されます。ファイルをプラグインマップにアップロードする前に、ファイルを最適化するための追加の手順を?qū)g行することをお勧めします。

1. ハワイなどの複數(shù)のベクトルパスを含む領(lǐng)域は、イラストレーターの複合パスとしてグループ化する必要があります。 Illustratorでは、関連するパスを選択してから、> compositeパス> create （またはcmd 8 ）に移動することでこれを行うことができます。
2. レイヤーが明確でユニークな名前を持っていることを確認してください。レイヤー名は、テンプレートおよび組織の目的のための領(lǐng)域として使用されます{{{id}}。
3. 次に、テキストエディターでSVGファイルを開き、各パスにタイトル屬性を與えます。これは、テンプレート{{title}}の領(lǐng)域として使用されます。

IDおよびタイトルフィールドは、ファイルから抽出されたデフォルトのプロパティであり、個々のパスに関連付けるために使用されます。プラグインの最新バージョン（現(xiàn)在5.3.7）から始めて、SVGファイルをWordPress管理パネルに直接編集して、各パスのIDとタイトル値を設(shè)定し、パス定義を調(diào)整して新しいパスを描畫できます。私は個人的には、Illustratorおよびコードエディターで編集するためのコントロールを好みますが、これはまだ良い選択です。

引き続きプラグインによって提供されるジオカカリブ化マップを使用し、 https：//www.miracleart.cn/link/e74b103532a9337cc42f051774ac49d4からのエントリを使用してデモを作成しています。

マップスタイルの設(shè)定

準備が整っていてSVGファイルを選択すると、プラグインインターフェイスが設(shè)定パネルを開きます。ここでは、マップ名を設(shè)定し、サイズとサイズを定義し、ツールチップやその他のメイン設(shè)定を有効にします。

[設(shè)定]タブに加えて、特定のマップ機能を制御および設(shè)定するためのタブも表示されます。次のタブ色に切り替えて、マップテーマを設(shè)定します。

上記のように、マップの充填値とストローク値、および各パスのさまざまなアクティブ狀態(tài)を制御できます。ベクトルベースのマップを使用することの利點！したがって、カスタムマップファイルを作成した場合、イラストレーターに定義されていないように、塗りつぶしとストロークの値を殘すことを好みます。ただし、STROKE幅をUIで効果的に調(diào)整することはできません（SVGの編集と各パスの値を変更する必要があるため）。したがって、イラストレーターに設(shè)定してファイルを再アップロードすることをお勧めします。

以下は、コンテナ（ディレクトリ、フィルター、サイドバーなど）のカラーオプションと、輪郭マップの最小および最大色の値（詳細については後で?。─扦?。コンテナスタイルは、テーマスタイルシートまたは設(shè)定のCSSタブでグローバルに設(shè)定することもできます。

マップデータを設(shè)定します

デフォルトでは、[エリア]タブは、選択したSVGのパスに基づいてエリアを事前に充填し、IDとタイトル値を表示します。必要に応じて、獨自のエリアフィールドを編集および作成できます。データベースタブにも同じことが言えます。ここで、マップデータを入力してマップ領(lǐng)域に関連付けることができます。

ゾーンおよびデータベースエントリの場合、UIでフィールドとコンテンツを手動で作成するか、CSVファイルからデータをアップロードすることを選択できます。

上記のスクリーンショットの最終データセット、特に會議の詳細、會議の詳細、およびデータベース內(nèi)の各國のフラグを示す畫像をアップロードするフィールドのカスタムエリアフィールドに注意してください。コンテンツをマップ自體から分離し、WordPressの投稿タイプの記事データとして引き込むことで、さらに一歩進むことができます。これは、Advanced Custom Fieldsが記事エディターにこれらのデータのフィールドを作成し、マップ內(nèi)の値で提出されたデータを関連付けることができる場所です。もちろん、これは必要ではありませんが、懸念を分離するためには、このオプションがあると便利です。

マップデータを表示します

地図上に領(lǐng)域またはデータベースオブジェクトに関する情報を表示する場合、プラグインにテンプレートを設(shè)定する必要があります。テンプレートには、ポップアップ、ツールチップ、詳細ビュー、ディレクトリ、タグの5つのタイプがあります。

テンプレートは、領(lǐng)域とデータベースの変數(shù)値を表示するために、プレーンテキスト、HTML、およびハンドルバータグを受け入れます。記事データベースフィールドを介して記事データを取得すると、標準のWordPressフィールド、post.id、post.post_title、post.post_content、post.url、およびこの構(gòu)文を使用して作成されたカスタムフィールドにアクセスできます：post.acf.my_field_name。リッチなテキストフィールド（post.post_contentなど）をレンダリングする必要がある場合は、Handlebars '{{{{{triple-stash}}}}}}}}}}}}を使用して、レンダリングされたHTMLを出力する必要があります。

ハンドルバーの構(gòu)文を使用すると、條件付きロジックをテンプレートに組み込んで、領(lǐng)域とデータベースの値に基づいて動的なテンプレートビューを作成できることも意味します。 MapsVG 5.0以降では、テンプレートオプションにはHTMLコメントと、デフォルトゾーンとデータベースフィールドのStartタグが事前に入力されています。とても便利です！

ページにマップを追加します

MapsVGには、マップを任意のページまたは記事に埋め込むためのショートコードが含まれています。ページにGutenbergショートコードブロックを配置し、マップIDを使用してMapsVGを呼び出して埋め込みます[mapsvg]。

Classic WordPressエディターで作業(yè)するか、5.0より前にプラグインバージョンを使用するユーザーの場合、マップアイコンがTinymceツールバーに追加され、マップIDを使用して記事コンテンツにショートコードを注入します。マップIDは、MapsVGエ??ディターダッシュボードまたはアクティビティマップの一番上のパン粉にあります。クリップボードへの便利なコピーボタンは、記事エディターで使用するためにそれをつかむためのショートコードの2つのインスタンスの橫に含まれています。

デモ

データ入力を完了し、いくつかの追加のMAPSVG設(shè)定を切り替えた後、完全に機能的なインタラクティブでレスポンシブなマップを取得します！このプロセス中に多くのコードに露出がほとんどないことに注意してください。

完全なデモを表示します

マップを超えて

プラグインのSVG機能の利點は、基本的に、SVGが必要なものになる可能性があることです。ほとんど何のベクターのパスからインタラクティブな「マップ」を作成できますか？建築フロアプラン、インフォグラフィック、またはキャリアのインタラクティブなタイムラインを作成できますか？それは単なる地図以上のものです！

WordPressではありませんか？問題ない。 MapsVGはjQueryプラグインとしても利用できます。また、WordPress以外のインタラクティブマップを使用しようとする価値もあります。

リソース

• MapsVG Webサイト（管理インターフェイスのリアルタイムデモンストレーションを含む）
• mapsvgチュートリアル
• mapsvgドキュメント
• mapsvg lite（wordpressプラグインディレクトリ）
• mapsvgビデオチュートリアルアーカイブ（YouTube）

以上がMapsVGを使用してWordPressでインタラクティブマップを作成しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。