Axure高階教程:調(diào)用自定義地圖為背景的可視化項目
編輯導(dǎo)語:如何在可視化項目中調(diào)用自定義地圖為背景?本篇文章里,作者就利用Axure為我們展示了相應(yīng)的流程操作,一起來看一下吧。
先放演示地址:https://y27wy8.axshare.com
如何實現(xiàn):本教程以高德地圖為例。
第一步,注冊高德或百度開發(fā)者帳號,申請key和創(chuàng)建自定義地圖樣式。
第二步,從高德或百度獲取地圖代碼(記得修改key和創(chuàng)建自定義地圖樣式)。
https://lbs.amap.com/demo/javascript-api/example/personalized-map/custom_style
對Axure稍微用的比較熟練的同學(xué)應(yīng)該知道,Axure是可以調(diào)用javascript的,這步是關(guān)鍵。上面copy的代碼是HTML,需要將代碼轉(zhuǎn)換為JS格式。
轉(zhuǎn)化工具:http://tool.chinaz.com/tools/html_js.aspx
第三步,復(fù)制右邊的代碼。
第四步,打開Axure,拖入一個框架(框架尺寸按項目實際而定。建議1920*1080,或者2:1屏,也可以在載入時/尺寸改變時使用Window.width、Window.height函數(shù)自適應(yīng)寬度和高度),在框架中打開外部URL,如下:
點擊fx,復(fù)制第三步的代碼(注意,第一行另加一段代碼,javascript:),如下:
到這一步,直接可以預(yù)覽自定義地圖樣式了。但是為了能更靈活方便復(fù)用,我們需要做一個中繼器或表格來修改自定義地圖展示方法。這里以表格為例。
第四步,新建立一個表格(記得設(shè)置為載入時隱藏),如下:
通過value參數(shù)(對應(yīng)行記得命名)和框架中的代碼關(guān)聯(lián)上。修改框架中打開外部URL,fx代碼,如下:
至此,大功告成。
再放演示地址::https://y27wy8.axshare.com
本文由 @Tran 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
老板,我付費下載了原型,但是我是初學(xué)者,看不太明白,能否指點一下呢
還是沒太明白,這個有類似視頻教程嗎
a8能用嗎?
按教程可以的
參數(shù)傳遞那里可以介紹一下中繼器方法嗎?
算了,不打算在這個平臺發(fā)了,沒幾天被人抄襲了,還發(fā)在我上面了,本平臺實力勸退。
請問樓主是用axure9操作嗎?為什么我用axure9最后預(yù)覽打不開
問題解決啦!感謝
怎么解決的,我也有這個問題