Axure高階教程:調(diào)用自定義地圖為背景的可視化項目

9 評論 4862 瀏覽 21 收藏 4 分鐘

編輯導(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é)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 老板,我付費下載了原型,但是我是初學(xué)者,看不太明白,能否指點一下呢

    來自廣東 回復(fù)
  2. 還是沒太明白,這個有類似視頻教程嗎

    來自上海 回復(fù)
  3. a8能用嗎?

    來自福建 回復(fù)
    1. 按教程可以的

      來自湖南 回復(fù)
  4. 參數(shù)傳遞那里可以介紹一下中繼器方法嗎?

    來自廣東 回復(fù)
    1. 算了,不打算在這個平臺發(fā)了,沒幾天被人抄襲了,還發(fā)在我上面了,本平臺實力勸退。

      來自湖南 回復(fù)
  5. 請問樓主是用axure9操作嗎?為什么我用axure9最后預(yù)覽打不開

    來自廣東 回復(fù)
    1. 問題解決啦!感謝

      來自廣東 回復(fù)
    2. 怎么解決的,我也有這個問題

      來自北京 回復(fù)