編輯導(dǎo)語：地圖是可視化原型中常用的元件，本文作者分享了有關(guān)托拉拽移動地圖的Axure教程，從基本材料的準(zhǔn)備、交互的設(shè)置展開分析，一起來學(xué)習(xí)一下吧，希望對你有幫助。
在可視化的原型中，地圖是常用的元件，所以今天作者就教大家如何制作拖拉拽移動地圖的原型模板。
一般而言，大部分人都是直接調(diào)用像高德地圖、百度地圖的圖表，這種方式的缺點(diǎn)是要聯(lián)網(wǎng)，而且修改時需要懂一點(diǎn)代碼，而且地圖都是由別人提供的，不能用自己的地圖素材，例如園區(qū)詳細(xì)地圖、或者商場內(nèi)部地圖就不是很適用了。所以今天我就教大家如何在不調(diào)用外部地圖的情況下制作托拉佐移動地圖的效果。
制作完成之應(yīng)具備以下交互效果：
鼠標(biāo)拖動地圖，可以查看各個方向的詳情； 模板制作完成之后，只需要導(dǎo)入地圖素材，即可自動生成交互效果。
原型地址：https://kup328.axshare.com/#g=1
一、基本材料的準(zhǔn)備這個原型我們只需要用到兩個元件，一個是圖片元件，另外一個是動態(tài)面板。
我們把事前的圖片導(dǎo)入圖片元件，這里需要注意的是圖片要上傳原圖，最好是大一點(diǎn)的，如果太小的話也沒有移動的空間。案例中的圖片尺寸為2666*1500。
動態(tài)面板要取消勾選自適應(yīng)內(nèi)容，尺寸要比圖片小，案例中為900*507。
我們把圖片移入動態(tài)面板后，要設(shè)置初始的位置，這里最好是中間那一塊地圖剛好在動態(tài)面板顯示的區(qū)域，案例中圖片的坐標(biāo)為-883，-497。
這里有個快速的方式，可以新建一個矩形和動態(tài)面板的大小一致，然后放在0，0的位置，先選中矩形，在選中圖片，點(diǎn)擊左右居中和上下居中，這樣就可以快速到達(dá)對應(yīng)位置。
二、交互的設(shè)置交互我們寫在動態(tài)面板拖動時，我們用移動的事件，選著跟隨鼠標(biāo)拖動。
這樣設(shè)置以后，我們在拖動鼠標(biāo)時，圖片就可以跟隨鼠標(biāo)移動了，又因?yàn)閯討B(tài)面板的尺寸和位置都是固定的，所以實(shí)現(xiàn)了拖動鼠標(biāo)就可以查看不同位置的詳情的效果了。
但是這里還存在一個問題，就是因?yàn)閳D片不是無限大的，如果我們一直向一個方向拖動，就會導(dǎo)致圖片已經(jīng)看完，出現(xiàn)空白的情況。所以在移動事件里，我們要給拖動的方位增加一個邊界：
左邊界和上邊界是最簡單的，都是小于等于0，這里很容易理解，假設(shè)圖片的x坐標(biāo)是10，那么0-10的位置就是空白的，所以上邊界的坐標(biāo)是小于等于0，左邊界也是一樣。
那右邊邊界其實(shí)就是圖片的右邊界和動態(tài)面板的寬重疊的位置，案例中動態(tài)面板的寬為900，所以右邊界要大于或等于900，這里初學(xué)者可以直接填寫900。
但是建議大家直接寫函數(shù)，因?yàn)槿绻麑憯?shù)字，后續(xù)修改的過程中你改變了動態(tài)面板的尺寸，那你還需要回來改交互，如果用width函數(shù)，就自動和動態(tài)面板的寬掛鉤，就算修改了尺寸也不用回去改交互，復(fù)用性會大大增加。
同樣道理，底部邊界其實(shí)就是圖片的底邊和動態(tài)面板高度重疊的位置，案例中動態(tài)面板高是507，所以底部邊界要大于或等于507，同樣建議大家用height函數(shù)。
這樣我們就完成拖拉拽移動地圖模板的制作了，以后使用時只需要在圖片元件里導(dǎo)入地圖的素材，移動一個位置和大小，即可自動生成拖拉拽移動查看的交互效果，是不是很方便呢。
那以上就是拖拉拽移動地圖原型模板制作教前的全部內(nèi)容了，感謝您的閱讀，我們下期見。
本文由 @Axure高保真原型 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
