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