wordpress地图_如何在WordPress中添加交互式地图

wordpress地图

Do you want to add an interactive map in WordPress? Interactive maps allow your users to discover routes, journeys, and itineraries by clicking on markers in the map or moving the mouse around. In this article, we will show you how to easily add an interactive map in WordPress.

您要在WordPress中添加交互式地图吗？ 交互式地图允许您的用户通过单击地图中的标记或在周围移动鼠标来发现路线，旅程和路线。 在本文中，我们将向您展示如何轻松地在WordPress中添加交互式地图。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

方法1：使用Google我的地图在WordPress中添加交互式地图 (Method 1: Adding an Interactive Map in WordPress using Google My Maps)

This method is simpler and doesn’t require you to install a plugin on your WordPress site.

这种方法更简单，不需要您在WordPress网站上安装插件。

First, you need to visit Google My Maps website and click on the ‘Create a new map’ button.

首先，您需要访问Google我的地图网站，然后点击“创建新地图”按钮。

This will bring you to the edit map page. On this screen, you can create your map by selecting a base map, adding points of interest, layers, and more.

这将带您进入编辑地图页面。 在此屏幕上，您可以通过选择基本地图，添加兴趣点，图层等来创建地图。

Using the toolbar at the top, you can draw lines on the map, add routes, use rulers, and select items.

使用顶部的工具栏，您可以在地图上画线，添加路线，使用标尺和选择项。

All your map items are saved in layers to the left. You can add, edit, rename, or even delete layers. You can also click on any item in your layer to add description, change title, or add photos / videos.

您所有的地图项都保存在左侧的图层中。 您可以添加，编辑，重命名甚至删除图层。 您也可以单击图层中的任何项目以添加描述，更改标题或添加照片/视频。

Once you are done editing your map, you need to make it public so that you can use it on your website. You can do this by clicking on the share button in the edit panel.

编辑完地图后，您需要将其公开，以便可以在您的网站上使用它。 您可以通过在编辑面板中单击共享按钮来执行此操作。

This will bring up the sharing center where you need to click on ‘Change’ under ‘Who has access’ section.

这将打开共享中心，您需要在其中单击“谁拥有访问权限”部分下的“更改”。

Next, you need to select ‘On – Public on the web’ and then click on the save button.

接下来，您需要选择“打开-在网络上公开”，然后单击“保存”按钮。

After that click on ‘Done’ to close sharing center.

之后，单击“完成”以关闭共享中心。

On the edit panel click on the menu icon next to map name and then select ‘Embed on my site’.

在编辑面板上，单击地图名称旁边的菜单图标，然后选择“在我的网站上嵌入”。

You will now see the embed code that you need to copy.

现在，您将看到需要复制的嵌入代码。

Next, head over to the post or page where you want to add your interactive map in WordPress. On the post edit screen, you need to switch to the text editor and paste the map embed code you copied earlier.

接下来，转到要在WordPress中添加交互式地图的帖子或页面 。 在后期编辑屏幕上，您需要切换到文本编辑器并粘贴您先前复制的地图嵌入代码。

You can now save your changes and preview your post to see your interactive map in action.

现在，您可以保存所做的更改并预览帖子，以查看正在运行的交互式地图。

方法2：使用插件在WordPress中添加交互式地图 (Method 2: Add an Interactive Map in WordPress Using Plugin)

While you can create and add interactive maps using Google Maps, it still lacks certain features and is limited to Google Maps.

尽管您可以使用Google Maps创建和添加交互式地图，但它仍然缺少某些功能，并且仅限于Google Maps。

If you want to use Open Street Maps, Bing, or other mapping services, then this method is for you.

如果要使用开放式街道地图，必应或其他地图服务，则此方法适合您。

First thing you need to do is install and activate the Maps Marker Pro plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活Maps Marker Pro插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you need to visit Maps Marker Pro page to create your interactive map. To start, you need to click on the ‘Add New Layer’ button.

激活后，您需要访问Maps Marker Pro页面来创建交互式地图。 首先，您需要单击“添加新层”按钮。

Next, you need to provide a name for your layer and click publish.

接下来，您需要为图层提供一个名称，然后单击发布。

Now that you have created a layer, you are ready to add map markers on it. Go to Maps Marker Pro » Add New Marker page to add your first marker.

既然已经创建了一个图层，就可以在其上添加地图标记了。 转到Maps Marker Pro»添加新标记页面以添加第一个标记。

First you will need to enter a title for the marker, and then search for the location and select it.

首先，您需要输入标记的标题，然后搜索位置并选择它。

You will also need to place your marker on the layer you created earlier. You can do this by typing the name of the layer in the layers field and select it.

您还需要将标记放置在您先前创建的图层上。 您可以通过在“图层”字段中键入图层名称并选择它来完成此操作。

Don’t forget to click on the ‘Publish’ button to save your marker.

不要忘记点击“发布”按钮来保存您的标记。

Repeat the process to add other markers to the layer.

重复该过程以将其他标记添加到图层。

Once you are done adding markers, you can edit any WordPress post or page where you want to add the map.

完成添加标记后，您可以编辑要在其中添加地图的任何WordPress帖子或页面。

On the post edit screen, click on ‘Add Map’ button.

在帖子编辑屏幕上，点击“添加地图”按钮。

This will bring up a popup displaying all your map markers and the layer you created earlier. You need to select the layer and click on insert map button.

这将弹出一个弹出窗口，显示所有地图标记和您先前创建的图层。 您需要选择图层，然后单击插入地图按钮。

The plugin will add the required shortcode in your post editor area. You can now save or publish your post and preview it to see your interactive map.

该插件将在您的帖子编辑器区域中添加所需的简码。 现在，您可以保存或发布您的帖子并进行预览，以查看您的交互式地图。

You can always edit your main layer to adjust the map size and dimensions.

您始终可以编辑主图层以调整地图的大小和尺寸。

Maps Marker Pro is a powerful plugin with tons of options like multi-layer maps, custom markers, directions, GPX support, export map in multiple formats, and more. You can explore these options to make your maps even more interactive.

Maps Marker Pro是一个功能强大的插件，具有大量选项，例如多层地图，自定义标记，方向，GPX支持，以多种格式导出地图等等。 您可以探索这些选项，以使地图更具交互性。

We hope this article helped you lean how to add an interactive map in WordPress. You may also want to see our list of the best Google Maps plugins for WordPress.

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-add-interactive-travel-maps-in-wordpress/

wordpress地图