新增地圖

選取平台: Android iOS JavaScript

地圖是以 GMSMapView 類別在 API 中呈現, UIView 的子類別。地圖是 Maps SDK for iOS,並提供新增、移除和移除的必要方法 及管理標記和折線等其他物件

簡介

Maps SDK for iOS 可讓您在 iOS 應用程式。這些地圖的外觀與您在 Google 地圖 iOS 應用程式和 SDK 也提供了許多相同的功能。

除了對應功能,API 還支援一系列 與 iOS 使用者介面模型相符的互動。舉例來說,您可以設定 定義回應使用者手勢、 例如輕按一下和輕觸兩下

使用 Map 物件時的金鑰類別為 GMSMapView 類別。 GMSMapView 會自動處理以下作業:

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

除了這些自動操作之外,您還可以控制 由 公開的屬性和方法呈現的地圖外觀 GMSMapView 類別。GMSMapView 可讓您新增及移除標記、地面 疊加層和折線、變更顯示的地圖類型,以及控制項 透過 GMSCameraPosition 顯示在地圖上的內容 類別

使用 SwiftUI 建立地圖

SwiftUI 提供另一種使用宣告式方法建立 UI 的方式。個人中心 告訴 SwiftUI 您希望如何與各種狀態一併顯示 剩下的就交給系統SwiftUI 會隨時處理 基本狀態會因事件或使用者動作而改變。

Maps SDK for iOS 是以 UIKit 為基礎建構而成,不提供 與 SwiftUI 相容的檢視區塊。如要在 SwiftUI 中加入地圖,必須符合 UIViewRepresentableUIViewControllerRepresentable。詳情請參閱 程式碼研究室:在 iOS 應用程式中加入地圖: SwiftUI

新增地圖

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

  1. 如要取得 SDK 和 API 金鑰並新增必要架構,請遵循下列操作: 操作步驟如下:

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

    2. 使用 API 金鑰

    3. 設定 Xcode 專案

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

    5. 建立或更新 ViewController。如果在此時顯示地圖 當畫面顯示控制器變為可見狀態時,請務必在 viewDidLoad 方法。

    6. 初始化地圖檢視時,請用 GMSMapViewOptions。屬性包括 framecameramapIDbackgroundColorscreen

    7. 使用camera GMSCameraPosition 物件。這個引數會指定 即可。

    8. 使用 GMSMapView 建立 GMSMapView 類別並例項化 options: 方法。如果這張地圖做為檢視控制器的 地圖選項 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 物件。

後續步驟

完成以上步驟後,您即可設定地圖 設定