[App Inventor 教學] WebViewer元件結合GoogleMap – V2

http://www.appinventor.tw/webviewer_googlemap2 <- source code 在這

本範例延續「WebViewer元件結合GoogleMap」範例,成為一個完整的Google Map 應用。

搭配最近App Inventor 新增的 Slider 元件,來放大縮小地圖比例。


Designer 頁面的主要元件有WebViewer、各功能的按鈕以及一個Slider,為了能取得自身的位置,也使用了LocationSensor元件。




相關的變數宣告都在這


本程式在的關鍵在於 updateMap 副程式,您可以看到就是把更新後的各文字內容更新之後,再呼叫WebViewer元件來重新載入畫面。


Slider 元件被拖動時,我們把他的 thumbvalue 切成四等分,分別去改動地圖的 zoom 為10, 13, 17, 20。

不同的地理座標按鈕會更新 gps 的變數內容,再傳入 updateMap 副程式。TP101、CKS、SunMoon 等變數內容都是經緯度座標

檢視模式也是一樣的概念,只是更新的變數為 maptype。

以下是執行畫面


1. 自由廣場、衛星圖      2. 台北101、混合圖       3. 日月潭、混合圖
      
4. 我的位置、街道圖     5. 我的位置、混合圖      5. 我的位置、混合圖(zoom13)

      

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *