使用mapsvg在WordPress中創建交互式地圖

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

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

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

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

創建新地圖的選項

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

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

創建新地圖

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

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

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

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

讓我們繼續使用插件提供的地理校準地圖並使用來自https://www.php.cn/link/e74b103532a9337cc42f051774ac49d4的條目來可視化今年來自世界各地的技術會議數據（部分）來創建一個演示。

設置地圖樣式

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

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

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

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

設置地圖數據

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

對於區域和數據庫條目，您可以選擇在UI 中手動創建字段和內容，或者從CSV 文件上傳數據。

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

顯示地圖數據

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

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

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

將地圖添加到頁面

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

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

演示

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

查看完整演示

超越地圖

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

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

資源

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

以上是使用mapsvg在WordPress中創建交互式地圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！