新增地圖

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

選取平台: 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 中新增地圖時,必須符合 UIViewRepresentableUIViewControllerRepresentable。詳情請參閱程式碼研究室透過 SwiftUI 在 iOS 應用程式中加入地圖

新增地圖

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

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

    1. 在 Google Cloud Console 中完成相關設定

    2. 使用 API 金鑰

    3. 設定 Xcode 專案

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

  3. 建立或更新 ViewController。如果此檢視畫面控制器變成可見,就會顯示地圖,請務必在 loadView 方法中建立。

    1. 建立 GMSCameraPosition 物件,指定地圖的中心縮放等級和縮放等級。將 GMSMapView 物件執行個體化時,您必須將 GMSCameraPosition 物件做為必要參數傳遞。

    2. 使用 GMSMapView mapWithFrame: 方法建立並對 GMSMapView 類別執行個體化。如果此地圖僅供用作檢視控制器的唯一視圖,則 CGRectZero 可用做地圖的框架,它會自動調整大小。

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

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

Swift

import GoogleMaps

class MapObjects : UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    let camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    let mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
  }
}
      

Objective-C

#import "MapObjects.h"
@import GoogleMaps;

@implementation MapObjects

- (void)viewDidLoad {
  [super viewDidLoad];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                          longitude:103.848
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = mapView;
}

@end
      

完成這些步驟之後,您就能進一步設定 GMSMapView 物件。

後續步驟

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