![App Inventor 導航元件簡易應用 App Inventor 導航元件簡易應用](https://i0.wp.com/i.imgur.com/U7YiKwJ.png?resize=1024%2C538&ssl=1)
App Inventor 導航元件簡易應用
在 Inventor 裡,有一個 Navigation 元件,只要搭配地圖元件和線條元件,就能做出簡易版的導航功能 App。
1. 新建一個 App Inventor 專案,需要使用到的元件如下:
按鈕、地圖、兩個標記、線條字串、Navigation 和 Yandex 翻譯元件。
![](https://i0.wp.com/i.imgur.com/JtbkQE4.png?w=960&ssl=1)
2. 於左側元件面板區域,找到 Navigation 元件,點選它旁邊的問號按鈕,再點更多訊息進入網頁。
![](https://i0.wp.com/i.imgur.com/ZZIRfH7.png?w=960&ssl=1)
3. 點選 ApiKey 資料旁邊的網址,或點選以下網址。
![](https://i0.wp.com/i.imgur.com/kcU9VGA.png?w=960&ssl=1)
4. 在網頁右上角,點選 Sing up,註冊一個新帳號。
![](https://i0.wp.com/i.imgur.com/Vreooge.png?w=960&ssl=1)
請輸入 Email、姓名和密碼,最後選取右下角我同意的按鈕,再按送出即可。
![](https://i0.wp.com/i.imgur.com/wXTWHAQ.png?w=960&ssl=1)
它會寄兩封信到信箱,其中一封是確認信,請點開後按確認,它會開啟一個新網頁,打開之後登入帳號密碼,進入 Dashboard 。(如果沒進入,在網頁右上角可以發現它。)
![](https://i0.wp.com/i.imgur.com/V0DZCEh.png?w=960&ssl=1)
第一次登入的使用者應該是空白畫面,請在底下 Request a token 輸入 Token name (隨便打一個),而 Token type 選擇 Free,最後點選 CREATE TOKEN。
![](https://i0.wp.com/i.imgur.com/eUEJzoq.png?w=960&ssl=1)
請把 Key 的資料先複製到記事本
![](https://i0.wp.com/i.imgur.com/ALOXIpx.png?w=960&ssl=1)
5. 回到 App Inventor 開始程式設計,先撰寫初始化時的程式如下:
![](https://i0.wp.com/i.imgur.com/QnABmqo.png?w=960&ssl=1)
6. 撰寫點選按鈕時的程式如下:
![](https://i0.wp.com/i.imgur.com/EicsguB.png?w=960&ssl=1)
Navigation 的 StartLatitude 為起點的緯度、StartLongitude 為起點的經度,剩下的 End…… 就是終點的經緯度,設定完後呼叫 RequestDirections。
7. 接著拖拉 GotDirections 的方塊,並設定如下:
![](https://i0.wp.com/i.imgur.com/CWjedcB.png?w=960&ssl=1)
設線條元件的多個定點為 points,這是在地圖上畫線用的。
然後 directions 是描述從起點往終點的行進路線,但因為是英文,所以用 Yandex 元件翻譯,不過這個翻譯元件有時沒有效果,不知道為何!?
8. 最後當翻譯元件翻譯完成後,將翻譯結果給標籤顯示。
![](https://i0.wp.com/i.imgur.com/JZvHFvB.png?w=960&ssl=1)
至此,整個 App 已撰寫完畢!
App 完整程式碼:
![](https://i0.wp.com/i.imgur.com/JTc13Cq.png?w=960&ssl=1)
App Inventor 專案 aia 檔案下載
App 執行範例:
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![查詢 YouBike 站點資料 查詢 YouBike 站點資料](https://i0.wp.com/i.imgur.com/D7w1pv5.png?resize=75%2C75&ssl=1)
![使用 App Inventor 播放 YouTube 音樂 使用 App Inventor 播放 YouTube 音樂](https://i0.wp.com/jbprogramnotes.com/%E6%96%87%E7%AB%A0%E7%B4%A0%E6%9D%90%E5%9C%96%E7%89%87/%E6%96%87%E7%AB%A0%E7%B4%A0%E6%9D%90%E5%9C%96%E7%89%87_%E4%BD%BF%E7%94%A8%20App%20Inventor%20%E8%AE%80%E5%8F%96%20YouTube%20%E9%9F%B3%E6%A8%82/%E6%96%87%E7%AB%A0%E7%B4%A0%E6%9D%90%E5%9C%96%E7%89%87_%E4%BD%BF%E7%94%A8%20App%20Inventor%20%E8%AE%80%E5%8F%96%20YouTube%20%E9%9F%B3%E6%A8%82.png?resize=75%2C75&ssl=1)