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

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

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

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

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

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

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

創(chuàng)建新地圖

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

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

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

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

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

設置地圖樣式

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

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

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

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

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

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

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

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

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

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

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

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

將地圖添加到頁面

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

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

演示

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

查看完整演示

超越地圖

插件的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)建交互式地圖的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！