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

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

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

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

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

安裝後，MapSVG 提供五個(gè)選項(xiàng)來(lái)創(chuàng)建基於矢量、圖像或Google 地圖功能的新地圖。為了本文的目的，我將重點(diǎn)介紹SVG 功能。

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

創(chuàng)建新地圖

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

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

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

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

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

設(shè)置地圖樣式

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

除了設(shè)置選項(xiàng)卡外，您還將看到用於控制和設(shè)置特定地圖功能的選項(xiàng)卡。切換到下一個(gè)選項(xiàng)卡顏色，在這裡我們?cè)O(shè)置地圖主題。

如上所示，我們可以控制地圖的填充和描邊值以及每個(gè)路徑的各種活動(dòng)狀態(tài)。使用基於矢量的地圖的好處！因此，如果我創(chuàng)建自定義地圖文件，我更傾向於在Illustrator 中將填充和描邊值保留為未定義。但是，筆劃寬度無(wú)法在UI 中有效調(diào)整（因?yàn)樗枰庉婼VG 並更改每個(gè)路徑的值），因此最好在Illustrator 中設(shè)置它並重新上傳文件。

下面是容器（例如目錄、過(guò)濾器、側(cè)邊欄等）的顏色選項(xiàng)，以及等值線地圖的最小和最大顏色值（稍後將詳細(xì)介紹?。Ｈ萜鳂邮揭部梢栽谀闹黝}樣式表或設(shè)置的CSS 選項(xiàng)卡中全局設(shè)置。

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

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

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

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

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

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

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

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

將地圖添加到頁(yè)面

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

對(duì)於在經(jīng)典WordPress 編輯器中工作或使用早於5.0 的插件版本的用戶，地圖圖標(biāo)將添加到TinyMCE 工具欄中，該工具欄會(huì)將簡(jiǎn)碼注入到您的文章內(nèi)容中，該簡(jiǎn)碼採(cǎi)用地圖ID。地圖ID 可以在MapSVG 編輯器儀表板或活動(dòng)地圖的頂部麵包屑中找到。方便的複製到剪貼板按鈕包含在簡(jiǎn)碼的兩個(gè)實(shí)例旁邊，以便將其抓取以在文章編輯器中使用。

演示

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

查看完整演示

超越地圖

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

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

資源

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

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