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