使用 Navigation 導航元件進行路徑規劃

 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 中文學習網 

曾吉弘,
2020年8月14日 凌晨2:18
v.1