新增地圖

選取平台： Android iOS JavaScript

API 中的地圖會以 GMSMapView 類別呈現，後者是 UIView 的子類別。地圖是 Maps SDK for iOS 中最重要的物件，提供新增、移除及管理其他物件的必要方法，包括標記和折線等。

簡介

您可以使用 Maps SDK for iOS，在 iOS 應用程式中顯示 Google 地圖。這些地圖的外觀與 Google 地圖 iOS 應用程式中的地圖相同，且 SDK 提供的功能也與該應用程式類似。

除了對應功能外，API 也支援一系列與 iOS UI 模型一致的互動。舉例來說，您可以定義回應程式，對輕觸和輕觸兩下等使用者手勢做出反應，藉此設定與地圖的互動。

使用地圖物件時，主要類別為 GMSMapView 類別。GMSMapView 會自動處理下列作業：

  • 連線到 Google 地圖服務。
  • 下載地圖圖塊。
  • 在裝置螢幕上顯示圖塊。
  • 顯示各種控制項，如平移和縮放。
  • 移動地圖及放大/縮小，回應平移和縮放手勢。
    • 傾斜地圖的觀看角度，回應雙指手勢。

除了這些自動作業外，您也可以透過 GMSMapView 類別公開的屬性和方法，控制地圖的行為和外觀。使用 GMSMapView 新增及移除標記、地面疊加層和折線，變更顯示的地圖類型，並透過 GMSCameraPosition 類別控制地圖上顯示的內容。

使用 SwiftUI 建構地圖

SwiftUI 提供另一種建立 UI 的方式，也就是宣告式方法。你只要告訴 SwiftUI 想要的檢視畫面外觀，以及所有不同的狀態，系統就會完成其餘工作。每當基礎狀態因事件或使用者動作而變更時，SwiftUI 就會更新檢視區塊。

Maps SDK for iOS 是以 UIKit 為基礎建構，不提供與 SwiftUI 相容的檢視畫面。如要在 SwiftUI 中新增地圖，必須符合 UIViewRepresentable 或 UIViewControllerRepresentable。如要瞭解詳情，請參閱「透過 SwiftUI 在 iOS 應用程式中加入地圖」程式碼研究室。

新增地圖

加入地圖的基本步驟如下：

  1. 如要取得 SDK 和 API 金鑰並新增必要架構，請按照以下各篇文章的步驟操作：

    1. 在 Google Cloud 控制台中完成相關設定

    2. 使用 API 金鑰

    3. 設定 Xcode 專案

    4. 在 AppDelegate 中，將 API 金鑰提供給 GMSServices 上的 provideAPIKey: 類別方法。

    5. 建立或更新 ViewController。如果這個檢視畫面控制器顯示時會顯示地圖，請務必在 viewDidLoad 方法中建立地圖。

    6. 初始化地圖檢視畫面時，請使用 GMSMapViewOptions 設定設定選項。屬性包括 frame、camera、mapID、backgroundColor 或 screen。

    7. 使用 GMSCameraPosition 物件設定 map options camera 屬性。這會指定地圖的中心點和縮放等級。

    8. 使用 GMSMapView options: 方法建立並例項化 GMSMapView 類別。如果這個地圖要當做檢視畫面控制器的唯一檢視畫面，地圖選項 frame 的預設值 CGRectZero 可做為檢視畫面 frame，地圖會自動調整大小。

    9. 將 GMSMapView 物件設為檢視畫面控制器的檢視畫面。例如 self.view = mapView;。

下面的示例添加一個地圖，中心位於新加坡市中心，到一個應用程序。

Swift

import GoogleMaps

class MapObjects : UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    let options = GMSMapViewOptions()
    options.camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    options.frame = self.view.bounds;

    let mapView = GMSMapView(options:options)
    self.view = mapView
  }
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                        longitude:103.848
                                                             zoom:12];
  options.frame = self.view.bounds;

  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  self.view = mapView;
}

完成這些步驟後，您可以進一步設定 GMSMapView 物件。

後續步驟

完成以上步驟後，您即可調整地圖設定。