編輯導(dǎo)語：如何在可視化項(xiàng)目中調(diào)用自定義地圖為背景？本篇文章里，作者就利用Axure為我們展示了相應(yīng)的流程操作，一起來看一下吧。

先放演示地址：https://y27wy8.axshare.com

如何實(shí)現(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，拖入一個框架（框架尺寸按項(xiàng)目實(shí)際而定。建議1920*1080，或者2：1屏，也可以在載入時/尺寸改變時使用Window.width、Window.height函數(shù)自適應(yīng)寬度和高度），在框架中打開外部URL，如下：

點(diǎn)擊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é)議。