原型设计工具Axure RP新手教程（七）：嵌入媒体教程-谷歌地图

在本教程中，您将学习如何使用嵌入式框架窗口小部件将YouTube视频，Google地图和其他媒体嵌入到原型页面中。

嵌入谷歌地图（点击此处查看视频）

小部件设置

• 打开一个新的RP文件，然后在Pages（页面）窗格中双击Page1（页面1）以在画布上将其打开。

• 将内联框架窗口小部件从Libraries（库）窗格拖到画布上。

• 在Style（样式）窗格中，在内联框架Preview（预览）下拉列表中选择Map（地图）。

注意：内联框架预览图像仅显示在Axure RP画布上，它的作用是让您知道框架将在Web浏览器中显示的内容。

从Google Maps获取嵌入URL

• 在 络浏览器中，导航到www.google.com/maps并搜索您想要使用的地址或位置。

• 单击左侧面板中的共享图标。在出现的对话框中，单击Embed a map（嵌入地图）。

• 在选项卡顶部显示的嵌入代码中，找到src属性并突出显示其右侧的URL（不带引 ）。复制URL。

注意：该URL会很长，因此请确保突出显示所有内容，直到右引 为止。 例：

https://www.google.com/maps/embedb=!1m18!1m12!1m3!1d3356.8953887537073!2d-117.16021218445606!3d32.71540739443067!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80d953589d4f36eb%3A0x4c8aa579077a06bd!2s1100%2C+707+Broadway%2C+San+Diego%2C+CA+92101!5e0!3m2!1sen!2sus!4v1558551203274!5m2!1sen!2sus

将内联框架的目标设置为地图的URL

• 返回Axure RP，双击内联框架以打开Link Properties（链接属性）对话框。

• 在对话框底部，选择用于链接到外部URL或文件的单选按钮，然后将您从Google Maps复制的URL粘贴到Hyperlink（超链接）字段中。

• 单击确定关闭Link Properties（链接属性）对话框。

预览页面

• 预览页面，并且Google Map应该出现在嵌入式框架中。

附加信息和提示

嵌入本地内容

要将计算机中的文件嵌入到嵌入式框架小部件中，请使用计算机文件系统中的文件路径（相对或绝对）。双击内联框架，然后在链接到外部URL或文件部分中输入文件路径。

注意：在《内联框架窗口小部件参考指南》中了解使用本地文件的限制。

想要获得Axure RP更多资源、正版授权的伙伴，请咨询【客服】了解

标签：