原型設(shè)計(jì)工具Axure RP新手教程（七）：嵌入媒體教程-谷歌地圖

---

Axure RP是一套專門為網(wǎng)站或應(yīng)用程序所設(shè)計(jì)的快速原型設(shè)計(jì)工具， 可以讓應(yīng)用網(wǎng)站策劃人員或網(wǎng)站功能界面設(shè)計(jì)師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規(guī)格。

免費(fèi)下載Axure RP 優(yōu)惠購(gòu)買Axure RP

---

在本教程中，您將學(xué)習(xí)如何使用嵌入式框架窗口小部件將YouTube視頻，Google地圖和其他媒體嵌入到原型頁(yè)面中。

嵌入谷歌地圖（點(diǎn)擊此處查看視頻）

小部件設(shè)置

• 打開(kāi)一個(gè)新的RP文件，然后在Pages（頁(yè)面）窗格中雙擊Page1（頁(yè)面1）以在畫布上將其打開(kāi)。

• 將內(nèi)聯(lián)框架窗口小部件從Libraries（庫(kù)）窗格拖到畫布上。

• 在Style（樣式）窗格中，在內(nèi)聯(lián)框架Preview（預(yù)覽）下拉列表中選擇Map（地圖）。

注意：內(nèi)聯(lián)框架預(yù)覽圖像僅顯示在Axure RP畫布上，它的作用是讓您知道框架將在Web瀏覽器中顯示的內(nèi)容。

從Google Maps獲取嵌入U(xiǎn)RL

• 在網(wǎng)絡(luò)瀏覽器中，導(dǎo)航到www.google.com/maps并搜索您想要使用的地址或位置。

• 單擊左側(cè)面板中的共享圖標(biāo)。在出現(xiàn)的對(duì)話框中，單擊Embed a map（嵌入地圖）。

• 在選項(xiàng)卡頂部顯示的嵌入代碼中，找到src屬性并突出顯示其右側(cè)的URL（不帶引號(hào)）。復(fù)制URL。

注意：該URL會(huì)很長(zhǎng)，因此請(qǐng)確保突出顯示所有內(nèi)容，直到右引號(hào)為止。 例：

https://www.google.com/maps/embed?pb=!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

將內(nèi)聯(lián)框架的目標(biāo)設(shè)置為地圖的URL

• 返回Axure RP，雙擊內(nèi)聯(lián)框架以打開(kāi)Link Properties（鏈接屬性）對(duì)話框。

• 在對(duì)話框底部，選擇用于鏈接到外部URL或文件的單選按鈕，然后將您從Google Maps復(fù)制的URL粘貼到Hyperlink（超鏈接）字段中。

• 單擊確定關(guān)閉Link Properties（鏈接屬性）對(duì)話框。

預(yù)覽頁(yè)面

• 預(yù)覽頁(yè)面，并且Google Map應(yīng)該出現(xiàn)在嵌入式框架中。

附加信息和提示

嵌入本地內(nèi)容

要將計(jì)算機(jī)中的文件嵌入到嵌入式框架小部件中，請(qǐng)使用計(jì)算機(jī)文件系統(tǒng)中的文件路徑（相對(duì)或絕對(duì)）。雙擊內(nèi)聯(lián)框架，然后在鏈接到外部URL或文件部分中輸入文件路徑。

注意：在《內(nèi)聯(lián)框架窗口小部件參考指南》中了解使用本地文件的限制。

關(guān)注慧聚IT微信公眾號(hào)???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。