MapSVG WordPress 插件讓您能夠快速且便捷地創(chuàng)建功能豐富的交互式地圖。當(dāng)您需要可視化特定位置的影響時，交互式地圖是項目的常見需求。如果您已經(jīng)在使用 WordPress，這款功能強大的插件可能是您制作可投入生產(chǎn)的地圖的解決方案。

回想一下您上次實現(xiàn)或規(guī)劃交互式地圖的經(jīng)歷。您可能會估計需要大量時間才能將數(shù)據(jù)從原始來源映射到 JSON 中，然后將其連接到可視化框架（如 D3）。接下來是配置用戶如何與地圖本身交互。這些都是相當(dāng)大的開發(fā)工作。

接下來是關(guān)于如何管理地圖數(shù)據(jù)的問題。數(shù)據(jù)存儲在外部文件中嗎？需要定期調(diào)用 API 來獲取數(shù)據(jù)嗎？直接在您網(wǎng)站的 WordPress 管理面板中管理此數(shù)據(jù)，就像管理所有其他網(wǎng)站內(nèi)容一樣，會容易得多。無需打開代碼編輯器并單獨維護(hù)地圖！

這些以及許多其他常見的地圖功能都內(nèi)置在 MapSVG 插件中，您可以創(chuàng)建多個獨特的地圖以滿足您的可視化需求。我們將深入研究一下這個插件，并使用它在 WordPress 中構(gòu)建一個基于交互式 SVG 的地圖。

創(chuàng)建新地圖的選項

安裝后，MapSVG 提供五個選項來創(chuàng)建基于矢量、圖像或 Google 地圖功能的新地圖。為了本文的目的，我將重點介紹 SVG 功能。

在 新建 SVG 地圖 選項中，有近 200 個經(jīng)過地理校準(zhǔn)和未經(jīng)校準(zhǔn)的國家和地區(qū)矢量地圖。此插件的免費版本 MapSVG Lite 允許站點管理員創(chuàng)建具有工具提示、可自定義詳細(xì)信息視圖以及通過經(jīng)緯度坐標(biāo)放置的標(biāo)記的交互式地圖。升級到付費版本（46 美元）將提供以下支持：地圖目錄、集成搜索、位置過濾器、地圖區(qū)域的詳細(xì)視圖、與 WordPress 文章和高級自定義字段的集成、自定義工具提示和等值線地圖，以及其他高級功能。

創(chuàng)建新地圖

好的，我們選擇創(chuàng)建一個新的基于 SVG 的地圖。從下拉菜單中選擇一個選項來創(chuàng)建矢量地圖。盡可能選擇地理校準(zhǔn)地圖而不是未經(jīng)校準(zhǔn)的地圖。地理校準(zhǔn)地圖更新，并具有區(qū)域標(biāo)題。此外，它們允許您通過地理坐標(biāo)（即經(jīng)度和緯度）或通過輸入自動轉(zhuǎn)換為坐標(biāo)的地址來添加地圖標(biāo)記。

如果使用您自己的自定義 SVG 文件，請選擇 上傳 SVG 選項。上傳后，您的自定義文件將顯示在 新建 SVG 地圖 下拉菜單中的 <kbd>user-uploads/your-file-name.svg</kbd> 下。在將文件上傳到插件地圖之前，我建議您執(zhí)行一些額外的步驟來優(yōu)化文件：

1. 包含多個矢量路徑的區(qū)域（例如夏威夷）需要在 Illustrator 中作為復(fù)合路徑進(jìn)行分組。在 Illustrator 中，可以通過選擇相關(guān)的路徑，然后轉(zhuǎn)到 對象 > 復(fù)合路徑 > 創(chuàng)建（或 CMD 8）來完成此操作。
2. 確保您的圖層具有清晰、唯一的名稱。圖層名稱將用作模板和組織目的的區(qū)域 {{id}}。
3. 接下來，在文本編輯器中打開您的 SVG 文件，并為每個路徑賦予一個 title 屬性。這將用作模板中的區(qū)域 {{title}}。

id 和 title 字段是從文件中提取的默認(rèn)屬性，用于將其與各個路徑關(guān)聯(lián)。從插件的最新版本（當(dāng)前為 5.3.7）開始，您可以直接在 WordPress 管理面板中編輯 SVG 文件以設(shè)置每個路徑的 id 和 title 值，以及調(diào)整路徑定義和繪制新路徑。我個人更喜歡在 Illustrator 和代碼編輯器中進(jìn)行編輯的控制，但這仍然是一個不錯的選擇。

讓我們繼續(xù)使用插件提供的地理校準(zhǔn)地圖并使用來自 http://ipnx.cn/link/e74b103532a9337cc42f051774ac49d4 的條目來可視化今年來自世界各地的技術(shù)會議數(shù)據(jù)（部分）來創(chuàng)建一個演示。

設(shè)置地圖樣式

現(xiàn)在我們已經(jīng)準(zhǔn)備好并選擇了 SVG 文件，插件界面將打開設(shè)置面板。在這里，我們設(shè)置地圖名稱、定義大小尺寸以及啟用工具提示等主要設(shè)置。

除了設(shè)置選項卡外，您還將看到用于控制和設(shè)置特定地圖功能的選項卡。切換到下一個選項卡 顏色，在這里我們設(shè)置地圖主題。

如上所示，我們可以控制地圖的填充和描邊值以及每個路徑的各種活動狀態(tài)。使用基于矢量的地圖的好處！因此，如果我創(chuàng)建自定義地圖文件，我更傾向于在 Illustrator 中將填充和描邊值保留為未定義。但是，筆劃寬度無法在 UI 中有效調(diào)整（因為它需要編輯 SVG 并更改每個路徑的值），因此最好在 Illustrator 中設(shè)置它并重新上傳文件。

下面是容器（例如目錄、過濾器、側(cè)邊欄等）的顏色選項，以及等值線地圖的最小和最大顏色值（稍后將詳細(xì)介紹！）。容器樣式也可以在您的主題樣式表或設(shè)置的 CSS 選項卡中全局設(shè)置。

設(shè)置地圖數(shù)據(jù)

默認(rèn)情況下，區(qū)域選項卡將根據(jù)所選 SVG 的路徑預(yù)先填充區(qū)域，顯示其 id 和 title 值。您可以根據(jù)需要編輯和創(chuàng)建您自己的區(qū)域字段。數(shù)據(jù)庫選項卡也是如此——您可以在其中輸入地圖數(shù)據(jù)并將其與地圖區(qū)域關(guān)聯(lián)。

對于區(qū)域和數(shù)據(jù)庫條目，您可以選擇在 UI 中手動創(chuàng)建字段和內(nèi)容，或者從 CSV 文件上傳數(shù)據(jù)。

請注意上面屏幕截圖中的最終數(shù)據(jù)集，特別是會議詳細(xì)信息的自定義區(qū)域字段、會議詳細(xì)信息以及上傳顯示數(shù)據(jù)庫中每個國家/地區(qū)國旗的圖像的字段。我們可以通過將內(nèi)容與地圖本身分開并將其作為任何 WordPress 文章類型的文章數(shù)據(jù)拉入來更進(jìn)一步。這就是高級自定義字段可以幫助在文章編輯器中創(chuàng)建這些數(shù)據(jù)的字段并將提交的數(shù)據(jù)與地圖中的值關(guān)聯(lián)的地方。當(dāng)然，這不是必需的，但為了關(guān)注點分離，擁有此選項是很好的。

顯示地圖數(shù)據(jù)

在顯示地圖上區(qū)域或數(shù)據(jù)庫對象的信息時，我們必須在插件中設(shè)置模板。有五種類型的模板：彈出窗口、工具提示、詳細(xì)信息視圖、目錄和標(biāo)簽。

模板接受純文本、HTML 和 Handlebar 標(biāo)記以顯示區(qū)域和數(shù)據(jù)庫變量值。如果通過文章數(shù)據(jù)庫字段拉入文章數(shù)據(jù)，您將可以訪問標(biāo)準(zhǔn)的 WordPress 字段、post.id、post.post_title、post.post_content、post.url，以及使用此語法創(chuàng)建的任何自定義字段：post.acf.my_field_name。每當(dāng)您需要呈現(xiàn)富文本字段（例如 post.post_content）時，您必須使用 Handlebars 的 {{{triple-stash}}} 語法來輸出呈現(xiàn)的 HTML。

Handlebar 語法的使用還意味著我們可以將條件邏輯構(gòu)建到模板中，以根據(jù)區(qū)域和數(shù)據(jù)庫值創(chuàng)建動態(tài)模板視圖。在 MapSVG 5.0 及更高版本中，模板選項預(yù)先填充了 HTML 注釋和默認(rèn)區(qū)域和數(shù)據(jù)庫字段的起始標(biāo)記。非常有用！

將地圖添加到頁面

MapSVG 包含一個用于將地圖嵌入到任何頁面或文章中的簡碼。在頁面上放置一個 Gutenberg 簡碼塊，并使用地圖 ID 調(diào)用 MapSVG 以嵌入：[mapsvg]。

對于在經(jīng)典 WordPress 編輯器中工作或使用早于 5.0 的插件版本的用戶，地圖圖標(biāo)將添加到 TinyMCE 工具欄中，該工具欄會將簡碼注入到您的文章內(nèi)容中，該簡碼采用地圖 ID。地圖 ID 可以在 MapSVG 編輯器儀表板或活動地圖的頂部面包屑中找到。方便的 復(fù)制到剪貼板 按鈕包含在簡碼的兩個實例旁邊，以便將其抓取以在文章編輯器中使用。

演示

完成數(shù)據(jù)輸入并切換一些額外的 MapSVG 設(shè)置后，我們得到了一個功能齊全的交互式 和響應(yīng)式 地圖！請注意，在此過程中我們幾乎沒有接觸到多少代碼。

查看完整演示

超越地圖

插件的 SVG 功能的優(yōu)點在于，從根本上說，SVG 可以是任何我們想要的東西。您可以從幾乎任何東西的矢量路徑創(chuàng)建交互式“地圖”：建筑平面圖、信息圖表或您職業(yè)生涯的交互式時間軸？它不僅僅是地圖！

不在 WordPress 上？沒問題。MapSVG 也作為 jQuery 插件提供，同樣值得嘗試在 WordPress 之外使用交互式地圖。

資源

• MapSVG 網(wǎng)站（包括管理界面的實時演示）
• MapSVG 教程
• MapSVG 文檔
• MapSVG Lite（WordPress 插件目錄）
• MapSVG 視頻教程存檔（YouTube）

以上是使用mapsvg在WordPress中創(chuàng)建交互式地圖的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！