中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：如何利用Axure實現自定義地圖展示？本篇文章里，作者結合Axure與高德地圖，對如何在Axure中設置相應參數、進而預覽時實現自定義地圖展示效果的操作流程進行了示范和總結，一起來看一下。

本文通過Axure+高德自定義地圖功能，能夠實現在Axure中配置相關參數，并最終在預覽時實現自定義地圖展示的效果。

一、實現原理

1. 高德提供了自定義地圖配置功能，并提供了html代碼，通過前端工具可以將html轉為js格式；
2. Axure能夠直接調用javascript，通過該功能結合高德轉的js，可以實現預覽時候展示我們創建的自定義地圖；
3. ?高德提供的自定義地圖有相當多的參數，通過Axure的局部變量，我們可以將在Axure中配置好的參數傳輸到js中，最終實現地圖樣式的自定義配置。

以下為具體操作步驟。

二、高德地圖配置

1. 注冊高德開發者賬號

進入高德開發者平臺（注冊地址：點擊注冊）注冊完成后，點擊控制臺進入配置頁面。

2. 新建應用并獲取key

進入工作臺后依次點擊應用管理-我的應用-創建新應用。

在彈出的對話框中根據要求完善信息，點擊新建按鈕，即可創建成功。

應用創建成功后，點擊應用名稱列中的添加按鈕，在彈出的對話框中根據要求完善信息，注意：服務平臺請選擇Web端(JS API)，否則會導致生成的key無法使用。

key添加成功后，在列表中我們就能夠看到生成的key，復制下來備用。

3. 新建自定義地圖

進入高德自定義地圖配置頁面，在頁面中可以選擇模板進行創建或直接新建，操作后將進入到地圖配置頁面。

在地圖的配置頁面中，我們能夠針對地圖中的各項內容進行配置，包括但不限于顯示、顏色等等，此處根據自己的需求進行設置即可。在設置完成后，點擊發布按鈕，地圖即可發布成功。

地圖發布成功后，回到自定義地圖管理頁，找到配置好的地圖卡片，點擊分享按鈕，在新頁面中即可獲取到地圖的調用地址，復制下來備用。

4. 生成地圖html

進入高德JS API示例頁面，在頁面中可以看到高德提供的默認地圖樣式，頁面具體如下分布。

在編輯區中，高德提供了默認的示例代碼，將其中的key和地圖樣式替換為第2步和第3步獲取的值后，點擊運行按鈕，就可以預覽到我們創建的自定義地圖樣式了。

5. 增加可配置參數

此步驟需要了解一丟丟的前端經驗，但是對于產品經理來說應該不是什么難事。

眾所周知，高德提供了相當多的參數用來控制地圖的展示，這些參數可以在此處獲取。在Map類中都是可以控制地圖顯示的參數，我們可以根據自己的需求復制對應的參數，添加到第4步中的樣式中，格式參考高德提供的示例代碼。

如下圖，我們在添加了顯示模式，是否允許縮放，縮放級別，等內容后，再次點擊運行，就可以獲取到一個看起來很炫酷的地圖模型了。代碼放在下面，可根據實際需求進行替換，在替換完成并預覽成功后，我們即獲得了一個html文件，可以復制下來備用。

var map = new AMap.Map(‘container’, {
resizeEnable: true,
viewMode: ‘3D’,
pitch:60,
showBuildingBlock:true,
rotation:35,
zoomEnable:false,
zoom:18,
center: [117.19199,34.263464],

三、html轉js

熟悉Axure的同學都知道Axure可以引用js，而html可以轉為js格式，通過如下轉換工具即可實現互轉。在左側填寫我們上一步驟獲取的html代碼，右側即可生成我們需要的js了，將代碼復制下來備用。

四、Axure引用js進行展示

打開Axure，新建一個頁面，在頁面中添加一個內聯框架并設置其尺寸為所需要的尺寸，此案例中由于需要將地圖作為背景設計可視化頁面，所以在頁面加載中添加配置將內聯框架尺寸設置為與窗口大小一致。

雙擊內聯框架，配置其鏈接屬性，選擇連接到url或文件，點擊fx函數配置按鈕，在彈出的頁面中即可輸入在第三步中獲取的js代碼了，配置完成后點擊確定按鈕，即配置完成。

注意：在代碼第一行需要添加聲明：javascript：

配置完成后，按F5進行預覽，就能夠看到我們配置的效果。

到此步，我們就能夠實現基本的地圖展示了，但是如果需要修改樣式的話，還是需要進行代碼層面的調整，然后再重新進行操作，流程復雜。那么借用Axure中的局部變量，Auxre也能夠實現參數的傳遞，從而實現Axure中配置好變量，預覽時候就能變化了，以下講具體操作步驟。

五、通過表格實現參數傳遞

1. 添加參數維護表格

在頁面中添加一個3列的表格，分別命名為item、value、描述，其中item代表的是參數名稱，value代表參數值，描述對應參數描述，方便時間長了忘記參數的意思了，配置完成后將2.5章節中的參數即參數值配置到表格中，得到下表。

2. 參數綁定

對表格中的value列單元格設置單元格名稱，建議與item保持一致，方便下一步的操作。

單元格名稱配置完成后，進入到內聯框架鏈接編輯頁面，先添加一系列局部變量，變量名稱與變量名一致，變量值取對應的單元格中的元件文字，如下圖對所有可配置的參數添加局部變量。

局部變量添加完成后，將上方編輯框中寫死的值替換為對應的局部變量，保存。

完成此步后，添加的參數表格內容就與js中的參數進行了綁定，我們可以嘗試根據要求對參數值進行修改，如將3D修改為2D，此時再次預覽，就可以看到頁面根據參數產生了變化。

最后將參數表格設置為載入后隱藏，預覽時候就只展示地圖頁面了，到此設置完成。

六、結語

通過該案例，我們能夠大概了解一些前端的開發知識。曾經有一個問題是產品經理需不需要懂開發，個人認為產品經理不一定要寫代碼，但是要懂得研發的邏輯，而Axure就是一個我們去了解研發邏輯的工具，當哪一天研發跟你說這個需求實現不了的時候，你就可以把原型扔出來，告訴他：

“我原型都能畫出來，你說代碼實現不了？”

本文由 @OMINI_BASS 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議