MIT App Inventor 於日前的更新推出了 Navigation 導航元件，使用 Openrouteservice 線上服務，您需要先到這個網站申請一個 api key 之後就可以使用了。Navigation 導航元件位於Map分類中，直接新增到您的 app 畫面中即可。本範例 .aia 原始碼請由本頁面最下方下載，Navigation 元件 詳細說明請點我

先介紹 Navigation 導航元件幾個重要的屬性：

• ApiKey：請填入您在 Openrouteservice 線上服務所申請的 api key
• StartLatitude / StartLongitude：起始點經緯度，可以動態指定也可以在此寫死，本範例的起始點經緯度為動態指定
• StartLatitude / StartLongitude：終點經緯度，可以動態指定也可以在此設定，本範例的終點經緯度直接指定為蘆洲國中
• Transportation method：移動方式，提供了走路(Walking)、開車(Driving)、腳踏車(Cycling)與輪椅(Wheelchair)。國外對於無障礙空間的要求相當高，國內的話我覺得看看就好。本範例將使用開車(Driving)

Designer

   畫面配置如下圖，畫面最上方有兩個 textbox 來檢視起始點的緯度(左)與經度(右)。

會將該點的座標分別更新在這裡。點選 [取得導航資訊] 按鈕就會對 Openrouteservice 進行呼叫，並將結果以一個 list 來回傳。在此我們巧妙地(自己說)運用一個 lineString (線條字串)元件，直接把 Navigation 的回傳結果設定為 lineString 元件的路點(points)就搞定了！

   另外還加了兩個 Marker 標記元件來代表起始點與終點。起始點(藍色 marker) 會自動移動到您點選的地圖位置上，終點(紅色 marker) 在本範例中則為固定，您之後可以自由修改這個功能。

Blocks

1. 點選地圖上任何一點時，會啟動 TapAtPoint事件並回傳點擊處的緯度(latitude) 與經度(longitude)。在此我們會先把標記_起點元件(藍色)設為可見(一開始不可見)，並根據該點經緯度來移動藍色標記、顯示於 TextBox 並設定 Navigation 元件的起始點經緯度。

2. 按下[取得導航資訊] 按鈕，就執行 RequestDirections 方法來取得路徑規劃，並自動呼叫下一步的 GotDirections 事件

3. 在 GotDirections 事件中，把取得的資訊全部顯示在畫面下方的標籤來看看吧，如果路徑很長，當然就會一大堆資訊跑出來。接著顯示 lineString 元件，並把回傳的 point 直接設定為 lineString 元件的 PointsFromString，輕輕鬆鬆。

執行畫面    

   程式開始時，只會看到紅色標記代表終點

點選地圖看看吧，會在您點選的地方出現藍色標記，並把該點的經緯度座標顯示出來。按下按鈕就可以看到路徑囉！

不同路徑的規畫結果

歡迎加入 MIT App Inventor 台灣使用者社群 ，更多有趣範例都在 App Inventor 中文學習網