在很多外賣APP中,當我們點完外賣後,會有地圖顯示騎手的位置。實現效果如下圖:
而如何將地圖嵌入原型之中呢,請往下繼續看。
在本例中,點擊鼠標左鍵可以對地圖進行拖動,可以使用鼠標滾輪實現地圖的放大和縮小。
第一步:
選擇元件:內聯框架。
設置其屬性:1、框架滾動條--從不顯示。
2、隱藏邊框
3、預覽圖片--地圖
第二步:
鼠標雙擊框架打開鏈接屬性設置界面,界面中選擇【鏈接到url或文件】,鏈接中填寫“mymap.html”。
第三步:打開百度地圖生成器,創建地圖,鏈接:http://api.map.baidu.com/lbsapi/creatmap/
1、設置定爲中心點。
2、設置地圖
3、點擊【獲取代碼】,並獲取密鑰,按照提示即可獲取。
第四步:新建一個文本文檔,將複製的代碼粘貼到其中,將密鑰填入到適當位置。保存文檔,將文件命名爲:mymap.html,要將文檔後綴名改成html。
第五步:將原型轉化爲html文件,將剛纔生成的mymap.html放到這個文件夾中。
第六步:再次通過生成原型查看HTML文件,地圖就能夠正常顯示了。
最後貼一下最近學Axure的學習教程