青銅修煉手冊:Axure地圖搜索交互

實現步驟:

1.先按下圖把元件都放好

2.然後將該內聯框架組件設置爲:不需要滾動,以及無邊框

3.將該組件默認顯示爲map樣式

4.選擇map樣式後,該組件會在加載完成即展示爲map樣式,並且我們可以雙擊內聯框架,將其外部鏈接設置爲百度地圖的位置,我們可以先查看一下效果

5. 將文本框命名爲location-TF,然後將其設置爲搜索框樣式

6.通過在百度地圖搜索地方,我們可以得到一條鏈接,如下方搜索【上海】

7.基於上一步,我們找到了百度地圖URL地址中的參數位置,現在,我們只要把location-TF中的內容,在點擊查詢後,給到內聯框架就可以了。

我們對查詢按鈕賦予如下事件,使得查詢按鈕在【鼠標點擊】時,打開內聯框架的鏈接。由於打開的鏈接是來自百度的,因此我們要選擇打開外部鏈接

8.然後點擊右下角的函數fx,設置變量,在打開的窗口中,我們需要設置個局部變量,使其的值等於文本框location-TF中鍵入的內容:

 9.然後在上面的文本框中,貼出百度地圖-上海市地圖的URL地址:

在貼入後,我們發現上海市不見了,這是因爲對中文字轉碼的影響,沒關係,我們對比下原來的URL地址(圖2),對比出轉碼部分即可:

 10.通過對比:3D後面的這部分,就是被轉碼的上海市,我們刪掉3D後面的內容,然後點擊插入局部變量,將變量【LVAR1】插入進去即可:

11.完成,點擊瀏覽一下

原型查看效果地址:https://fx7nnd.axshare.com

 原型RP文件下載地址:https://download.csdn.net/download/qq_27884377/10865914

                         想了解更多Axure資訊,趕快下方掃碼加入【Axure修煉手冊】微信公衆號吧!!!

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章