【MIT App Inventor 入門範例】ex4.Map Tour景點介紹 @ 謝昌勳

【MIT App Inventor 入門範例】ex4.Map Tour景點介紹

1.先加入三元件

Image (Basic) Image1 只秀出圖片
ListPicker (Basic) ListPicker1 顯示表列目的地
ActivityStarter (other stuff) ActivityStarter1 ((non-visible) component)

2.修改ListPicker1 Text 為 "台北景點選擇" or 其它地區,你自己的家鄉,高雄,台中,雲林....

REF:
台北景點:

http://okgo.tw/buty/taipei.html

http://travel.network.com.tw/tourguide/twnmap/taipeicity.asp

http://travel.network.com.tw/main/travel/taipeicity.asp

版面安排

3.設定ActivityStarter的特性

Action: android.intent.action.VIEW
ActivityClass: com.google.android.maps.MapsActivity
ActivityPackage: com.google.android.apps.maps

4.開啟 blocks editor 設定方塊
def variable ("Destinations") (Definitions) 新增目的地的列表
make a list (Lists) 製作清單
text ("臺北市西門町") (Text) 第1個地點 (Taipei Ximending)
text ("臺北市孔廟") (Text) 第2個地點 (Taipei Confucius Temple)
text ("台北植物園") (Text) 第3個地點 (Taipei Botanical Garden)
text ("陽明山國家公園") (Text) 第4個地點 (Yangmingshan National Park)
text ("臺北市立木柵動物園") (Text) 第5個地點 (Taipei Zoo)

方塊圖:

5.加入元件的行為
MapTour有兩種行為
(1).app 開始執行時,當點選"ListPicker"元件(台北景點選擇的按鈕)會列出5個地點清單
(2).點選目的地後,會開啟 Google地圖顯示所選的地點

所以程式開始執行時要顯示清單
Screen1.Initialize (Screen1) app開始執行時
set ListPicker1.Elements to (ListPicker1) 列出清單
global destinations (My Definitions) 顯示目的地

6.執行 Google Maps 搜尋目的地
當目的地選好後,利用ActivityStarter執行Google Maps 搜尋所選定的目的地
(1). ListPicker.AfterPicking 事件啟動
(2).將ActivityStarter的DataUri元件值設定geo:0,0?q='西門町' (目的地)
(3).ActivityStarter1.StartActivity 執行 Google Maps 搜尋目的地

ListPicker1.AfterPicking (ListPicker1) 當ListPicker被點選時
set ActivityStarter1.DataUri to (ActivityStarter1) DataUri 呼叫 Maps 執行
make text (Text) 建立 DataUri所需要的文字
text ("geo:0,0?q=") (Text) DataUri的第一部分文字
ListPicker1.Selection (ListPicker1) 選定的地點
ActivityStarter1.StartActivity (ActivityStarter1) 執行Maps