嵌入地图

概述

You can embed maps from multiple providers in your app to provide users with an easy way to reach your location. You can also configure a Navigate button to offer users directions on how to get from their location to a destination of your choice. For the purpose of this example, we will use Google Maps to embed maps into UiPath^® Apps.

提示：

有关如何使用 Google 地图 搜索 API 的更多信息，请查看 官方文档。

嵌入地图

1. 在 Google 地图上，搜索您要共享的地址。

2. 单击“ 共享 ”，然后转到“ 嵌入地图 ”选项卡。

   

3. Select the desired size and copy the link by selecting COPY HTML.

4. 在 UiPath^TM Apps 中转到所需的应用程序。

5. 添加 IFrame 控件。

6. 在控件的“ 来源 ”字段中添加在 步骤 3 中复制的链接。删除<iframe>标签并添加引号。 例如，链接应如下所示：

"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1511.2061413255587!2d-73.9796223417571!3d40.75295602669006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2590199a4c12d%3A0x35c4d69dd805cc5e!2sOne%20Vanderbilt!5e0!3m2!1sen!2sro!4v1674472555170!5m2!1sen!2sro"

注意： 要动态嵌入应用程序，我们建议使用 Google Maps API 嵌入地图。 有关更多信息，请查看 官方文档。

添加“导航”按钮

1. 在 UiPath^TM Apps 中转到所需的应用程序。

2. 添加“ 按钮 ”控件。

3. 将按钮重命名为 Navigate。 您还可以向按钮添加适当的图标，例如汽车。

4. 转到“ 事件 ” 选项卡，然后编辑按钮的“ 已单击” 规则。

5. 添加“打开 URL”规则。

6. 使用以下格式添加来自 Google 地图 的Directions API ：

   "https://www.google.com/maps/dir/?api=1&destination=UiPath+New+York+USA" 。

结果

When previewing the app, the embedded interactive map and button are displayed. If you click Navigate, a new Google Maps page is opened. You can select your desired means of transportation and add your starting point, for instructions on how to get to the configured destination.