[App Inventor 教學] 妙用無窮的WebViewer 元件. Google Map示範

App Inventor中文學習網, 方便好用的Android 學習好所在~

幾 乎每一本Android教學書籍中都會介紹如何在App畫面中載入Google Map, 偏偏這不是一件太簡單的事. App Inventor雖然沒有辦法載入正規的MapView, 但還是可以利用 WebViewer元件 載入靜態圖片來達到很好的效果. 重點是很好學,  現在就一起來吧!!  以下的語法都可以直接在網路瀏覽器中開啟

延伸閱讀(文章中都有App Inventor原始碼可以下載):

[App Inventor教學]掃描QRCode後開啓GoogleMap定位

[App Inventor教學] Location Sensor 取得經緯度座標後，送出給Google Map 來定位

下圖語法: https://maps.google.com/maps?q=25.03091,121.50437+(Hello~)

將地圖在中正紀念堂(25.03091,121.50437)置中, 點擊小標籤之後就會顯示[Hello~]小視窗

下圖語法: http://maps.google.com/maps/api/staticmap?center=25.03091,121.50437&zoom=18&size=640×640&sensor=false&maptype=roadmap&markers=color:blue%7Clabel:C%7C25.03091,121.50437

這是一張靜態圖片, 分段說明如下

center=25.03091,121.50437 : 地圖在此處置中.

在一張圖中放入兩個大頭針

http://maps.googleapis.com/maps/api/staticmap?center=%2025.03091,121.50437&zoom=18&size=320×320&maptype=roadmap&sensor=false&markers=color:blue|label:S|25.03091,121.50437&markers=color:green|label:G|25.03100,121.50480

&markers=color:blue|label:S|25.03091,121.50437   -->在25.03091,121.50437處放置一個藍色，標籤為S的大頭針。