iT邦幫忙

2024 iThome 鐵人賽

DAY 23
1
Mobile Development

用最接近自然語言的Basic30天學會行動App系列 第 23

Basic30天學會行動App-第23章.創建地圖與位置功能

  • 分享至 

  • xImage
  •  

第23章: 創建地圖與位置功能

在現代行動應用程式中,地圖與位置功能是非常重要的部分。無論是導航、位置共享、還是尋找附近的服務,這些功能都能顯著提升應用程式的價值。本章將介紹如何在 B4A 中使用 Google Maps API,取得與顯示地理位置,以及實作路徑規劃與導航功能。

使用Google Maps API

Google Maps API 提供了豐富的地圖服務,允許開發者在應用程式中嵌入地圖、標記位置、顯示路徑等。使用 Google Maps API 之前,需在 Google Cloud Platform 中啟用 Google Maps SDK 並獲取 API 金鑰。

  1. 初始化Google Maps
    在 B4A 中使用 Google Maps 需要導入相關庫並設置相應的許可權。首先,確保在專案中已經加入 Google Maps 的 Library。
Sub Process_Globals
    Private gmap As GoogleMap
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("MapLayout")
    Dim mapFragment As MapFragment
    mapFragment.Initialize("Map", Activity, "gmapFragment")
    mapFragment.GetMapAsync("gmap")
End Sub

Sub gmap_Ready
    gmap = mapFragment.GetMap
    gmap.MapType = gmap.MAP_TYPE_NORMAL
End Sub
  1. 添加標記與資訊視窗
    標記(Marker)是地圖上的標示點,通常用於表示特定位置。可以為標記添加資訊視窗,顯示更多的訊息。
Sub AddMarker
    Dim lat As Double = 25.0330
    Dim lng As Double = 121.5654
    Dim marker As Marker
    marker = gmap.AddMarker(lat, lng, "台北 101")
    marker.Snippet = "台灣的地標之一"
    gmap.AnimateCamera(gmap.CameraPosition.Initialize(lat, lng, 15))
End Sub

取得與顯示地理位置
為了取得使用者的地理位置,可以使用 Android 提供的定位服務(Location Services)。需要在應用程式中加入相應的許可權,並處理地理位置的回傳。

  1. 設定定位許可權
    首先,確保在 AndroidManifest.xml 中添加定位許可權。
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  1. 獲取使用者位置
    透過 LocationManager 或 FusedLocationProvider 可以輕鬆取得使用者的當前位置。
Sub GetCurrentLocation
    Dim lm As LocationManager
    lm.Initialize("lm")
    If lm.IsInitialized Then
        Dim location As Location = lm.GetLastKnownLocation
        If location.IsInitialized Then
            Log("Latitude: " & location.Latitude)
            Log("Longitude: " & location.Longitude)
            ' 更新地圖位置
            gmap.AnimateCamera(gmap.CameraPosition.Initialize(location.Latitude, location.Longitude, 15))
        End If
    End If
End Sub

路徑規劃與導航

路徑規劃是地圖應用程式中常見的功能,透過 Google Directions API,可以實現從一個位置到另一個位置的路徑規劃。

  1. 使用Google Directions API
    Google Directions API 能夠提供兩個點之間的路徑資訊,包括行駛距離、所需時間等。需要先在 Google Cloud Platform 中啟用 Directions API 並獲取 API 金鑰。
Sub GetDirections(origin As String, destination As String)
    Dim job As HttpJob
    job.Initialize("Directions", Me)
    Dim url As String = "https://maps.googleapis.com/maps/api/directions/json?origin=" & origin & "&destination=" & destination & "&key=YOUR_API_KEY"
    job.Download(url)
End Sub

Sub JobDone(Job As HttpJob)
    If Job.Success Then
        Dim parser As JSONParser
        parser.Initialize(Job.GetString)
        Dim root As Map = parser.NextObject
        Dim routes As List = root.Get("routes")
        If routes.Size > 0 Then
            Dim route As Map = routes.Get(0)
            Dim overview_polyline As Map = route.Get("overview_polyline")
            Dim points As String = overview_polyline.Get("points")
            DrawRouteOnMap(points)
        End If
    End If
    Job.Release
End Sub
  1. 在地圖上繪製路徑
    解析 Google Directions API 返回的路徑資料後,可以在地圖上繪製這條路徑。
Sub DrawRouteOnMap(encodedPoints As String)
    Dim polylineOptions As PolylineOptions
    polylineOptions.Initialize
    polylineOptions.Color = Colors.Blue
    polylineOptions.Width = 10
    
    Dim points As List = DecodePoly(encodedPoints)
    For Each point As Map In points
        polylineOptions.AddPoint(point.Get("lat"), point.Get("lng"))
    Next
    
    gmap.AddPolyline(polylineOptions)
End Sub

' Polyline 解碼方法
Sub DecodePoly(encoded As String) As List
    Dim poly As List
    poly.Initialize
    Dim index As Int = 0
    Dim len As Int = encoded.Length
    Dim lat As Int = 0
    Dim lng As Int = 0
    
    While index < len
        ' 解碼邏輯
        ' 略
        ' 將解碼後的點加入 poly 列表
        Dim point As Map
        point.Initialize
        point.Put("lat", lat / 1E5)
        point.Put("lng", lng / 1E5)
        poly.Add(point)
    Wend
    
    Return poly
End Sub

範例程式:綜合應用

以下是一個完整的應用程式範例,展示如何結合 Google Maps API、地理位置服務與路徑規劃功能。

Sub Process_Globals
    Private gmap As GoogleMap
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("MapLayout")
    InitializeMap
End Sub

Sub InitializeMap
    Dim mapFragment As MapFragment
    mapFragment.Initialize("Map", Activity, "gmapFragment")
    mapFragment.GetMapAsync("gmap")
End Sub

Sub gmap_Ready
    gmap = mapFragment.GetMap
    gmap.MapType = gmap.MAP_TYPE_NORMAL
    ' 取得並顯示當前位置
    GetCurrentLocation
End Sub

Sub GetCurrentLocation
    Dim lm As LocationManager
    lm.Initialize("lm")
    If lm.IsInitialized Then
        Dim location As Location = lm.GetLastKnownLocation
        If location.IsInitialized Then
            gmap.AnimateCamera(gmap.CameraPosition.Initialize(location.Latitude, location.Longitude, 15))
            ' 設置標記
            AddMarker(location.Latitude, location.Longitude, "目前位置")
            ' 規劃路徑
            GetDirections(location.Latitude & "," & location.Longitude, "25.0330,121.5654") ' 台北 101 的經緯度
        End If
    End If
End Sub

Sub AddMarker(lat As Double, lng As Double, title As String)
    Dim marker As Marker
    marker = gmap.AddMarker(lat, lng, title)
    gmap.AnimateCamera(gmap.CameraPosition.Initialize(lat, lng, 15))
End Sub

Sub GetDirections(origin As String, destination As String)
    Dim job As HttpJob
    job.Initialize("Directions", Me)
    Dim url As String = "https://maps.googleapis.com/maps/api/directions/json?origin=" & origin & "&destination=" & destination & "&key=YOUR_API_KEY"
    job.Download(url)
End Sub

Sub JobDone(Job As HttpJob)
    If Job.Success Then
        Dim parser As JSONParser
        parser.Initialize(Job.GetString)
        Dim root As Map = parser.NextObject
        Dim routes As List = root.Get("routes")
        If routes.Size > 0 Then
            Dim route As Map = routes.Get(0)
            Dim overview_polyline As Map = route.Get("overview_polyline")
            Dim points As String = overview_polyline.Get("points")
            DrawRouteOnMap(points)
        End If
    End If
    Job.Release
End Sub

Sub DrawRouteOnMap(encodedPoints As String)
    Dim polylineOptions As PolylineOptions
    polylineOptions.Initialize
    polylineOptions.Color = Colors.Blue
    polylineOptions.Width = 10
    
    Dim points As List = DecodePoly(encodedPoints)
    For Each point As Map In points
        polylineOptions.AddPoint(point.Get("lat"), point.Get("lng"))
    Next
    
    gmap.AddPolyline(polylineOptions)
End Sub

結論
本章探討了如何在 B4A 中實作地圖與位置功能,包括使用 Google Maps API 顯示地圖、標記位置,取得與顯示地理位置,以及透過 Google Directions API 實作路徑規劃與導航功能。這些技術在現代應用程式中非常常見,能夠為用戶提供豐富的地圖和定位服務。
透過本章的學習,您應該能夠實作基本的地圖應用,並且根據應用程式的需求,靈活地將地圖和位置功能整合到您的專案中。無論是顯示使用者當前位置、規劃路徑、還是整合其他地圖相關的功能,這些技術都是強大且實用的工具。

參考網址
https://www.b4x.com/


上一篇
Basic30天學會行動App-第22章.使用Firebase擴展功能
下一篇
Basic30天學會行動App-第24章.多語系支援
系列文
用最接近自然語言的Basic30天學會行動App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言