如何在WordPress中添加交互式地圖


您要在WordPress中添加交互式地圖嗎? 交互式地圖允許您的用戶通過單擊地圖中的標記或在周圍移動鼠標來發現路線,旅程和路線。 在本文中,我們將向您展示如何輕鬆地在WordPress中添加交互式地圖。

在WordPress中添加交互式地圖

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

方法1:使用Google我的地圖在WordPress中添加交互式地圖

此方法更簡單,不需要您在WordPress網站上安裝插件。

首先,您需要訪問Google我的地圖網站,然後點擊“創建新地圖”按鈕。

建立新地圖

這將帶您進入編輯地圖頁面。 在此屏幕上,您可以通過選擇基本地圖,添加興趣點,圖層等來創建地圖。

編輯地圖

使用頂部的工具欄,您可以在地圖上繪製線條,添加路線,使用標尺和選擇項目。

使用地圖工具欄

您所有的地圖項都保存在左側的圖層中。 您可以添加,編輯,重命名甚至刪除圖層。 您也可以單擊圖層中的任何項目以添加描述,更改標題或添加照片/視頻。

添加描述

編輯完地圖後,需要將其公開,以便可以在您的網站上使用它。 您可以通過在編輯面板中單擊共享按鈕來執行此操作。

分享您的互動地圖

這將打開共享中心,您需要在其中單擊“誰擁有訪問權限”部分下的“更改”。

共享設置

接下來,您需要選擇“打開-在網絡上公開”,然後單擊“保存”按鈕。

公開地圖

之後,單擊“完成”以關閉共享中心。

在編輯面板上,單擊地圖名稱旁邊的菜單圖標,然後選擇“在我的網站上嵌入”。

在網站上嵌入地圖

現在,您將看到需要復制的嵌入代碼。

嵌入代碼

接下來,轉到要在WordPress中添加交互式地圖的帖子或頁面。 在後期編輯屏幕上,您需要切換到文本編輯器並粘貼您先前複製的地圖嵌入代碼。

在WordPress中粘貼您的交互式地圖代碼

現在,您可以保存所做的更改並預覽帖子,以查看正在運行的交互式地圖。

地圖預覽

方法2:使用插件在WordPress中添加交互式地圖

儘管您可以使用Google Maps創建和添加交互式地圖,但它仍然缺少某些功能,並且僅限於Google Maps。

如果要使用開放式街道地圖,必應或其他地圖服務,則此方法適合您。

您需要做的第一件事是安裝並激活Maps Marker Pro插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 Maps Marker Pro 頁面以創建您的交互式地圖。 首先,您需要單擊“添加新層”按鈕。

在地圖上添加新圖層

接下來,您需要為圖層提供一個名稱,然後單擊發布。

創建新層並發布

既然已經創建了一個圖層,就可以在其上添加地圖標記了。 去 Maps Marker Pro»添加新標記 頁面添加您的第一個標記。

添加第一個標記

首先,您需要輸入標記的標題,然後搜索位置並選擇它。

您還需要將標記放置在您先前創建的圖層上。 您可以通過在“圖層”字段中鍵入圖層名稱並選擇它來完成此操作。

不要忘記單擊“發布”按鈕以保存您的標記。

重複該過程以將其他標記添加到圖層。

完成添加標記後,您可以編輯要在其中添加地圖的任何WordPress帖子或頁面。

在帖子編輯屏幕上,點擊“添加地圖”按鈕。

添加地圖按鈕

這將彈出一個彈出窗口,顯示所有地圖標記和您先前創建的圖層。 您需要選擇圖層,然後單擊插入地圖按鈕。

選擇並在您的帖子或頁面中插入地圖圖層

該插件將在您的帖子編輯器區域中添加所需的簡碼。 現在,您可以保存或發布您的帖子並對其進行預覽以查看您的交互式地圖。

預覽互動式地圖

您始終可以編輯主圖層以調整地圖的大小和尺寸。

Maps Marker Pro是一個功能強大的插件,具有大量選項,例如多層地圖,自定義標記,方向,GPX支持,以多種格式導出地圖等等。 您可以探索這些選項,以使地圖更具交互性。

我們希望本文能幫助您了解如何在WordPress中添加交互式地圖。 您可能還希望查看我們的WordPress最佳Google Maps插件列表。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。