因?yàn)槲覀儾幌胱屨麄€(gè)地圖顯示在顯示屏上,我們將創(chuàng)建一個(gè)類似 window 的部件，這個(gè)部件給了我們一個(gè)可以查看部分地圖的視圖。要做到這一點(diǎn),在設(shè)計(jì)區(qū)域選擇谷歌地圖,右鍵單擊并選擇轉(zhuǎn)換為動(dòng)態(tài)面板。

將其標(biāo)記為 MapWindow。

調(diào)整 MapWindow 面板

http://wiki.jikexueyuan.com/project/axure/images/draggablemap2.png" alt="image" />

接下來,重新定位 MapWindow 面板到灰色的長方形頂部。調(diào)整矩形內(nèi)的面板,看起來像上邊的圖像。

重新定位地圖面板內(nèi)的狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/draggablemap3.png" alt="image" />

我們想要紅色的地圖圖像中標(biāo)記在地圖的中間,讓我們重新定位 MapWindow 面板內(nèi)的地圖狀態(tài)。

打開 MapWindow 面板的 State1。復(fù)位地圖位置，讓紅色的地圖標(biāo)記大概在動(dòng)態(tài)面板的中間。部分地圖可能會(huì)超出邊框，但這沒關(guān)系。

返回 Draggable Map 頁面然后檢查線框是否在你想要的地方。

將地圖裝換為動(dòng)態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/draggablemap4.png" alt="image" />

現(xiàn)在我們?yōu)榈貓D創(chuàng)建一個(gè)窗口，讓其可以被拖拽。為了做到這些，我們將地圖裝換為動(dòng)態(tài)面板。再次打開 MapWindow 的 State1，右鍵單擊圖片然后選中 Convert to Dynamic Panel 選項(xiàng)創(chuàng)建另一個(gè)動(dòng)態(tài)面板。

編輯這個(gè)面板為 MapContent。你現(xiàn)在會(huì)注意到這個(gè)面板嵌套在 MapWindow 中。

添加 drag 動(dòng)作

http://wiki.jikexueyuan.com/project/axure/images/draggablemap5.png" alt="image" />

在 MapWindow 面板中，添加一個(gè)事例到 OnDrag 事件中去。在動(dòng)作菜單中，選中 Move 然后指定到 MapContent 面板。一般地，現(xiàn)在可以拖動(dòng)面板了。點(diǎn)擊 OK 關(guān)閉事例編輯器。

添加交互來重置地圖

http://wiki.jikexueyuan.com/project/axure/images/draggablemap6.png" alt="image" />

返回 Draggable Map 頁面。選中 Reset Map 鏈接，然后通過動(dòng)作 Move MapContent to (-530, -135) 添加一個(gè) OnClick 事例，大概是原來的位置。

然后這就是原型了，測試它吧。

上一篇：按鈕的交互下一篇：自動(dòng)旋轉(zhuǎn)標(biāo)題