在 iOS 應用程式 (Swift) 中新增地圖

1. 事前準備

本程式碼研究室將教您如何開始使用 Google 地圖平台，在 Swift 中建構 iOS 應用程式。您將建立一個 iOS 應用程式，執行下列操作：

• 載入 Maps SDK for iOS 和 Maps SDK for iOS 公用程式庫。
• 顯示以澳洲雪梨為中心的地圖。
• 顯示雪梨周圍 100 點的自訂標記。
• 實作標記叢集。
• 啟用標記，以便在使用者輕觸標記時，將地圖中心置中，並在地圖上畫圓。

必要條件

• Swift 和 iOS 開發的基本概念。

課程內容

• 載入 Maps SDK for iOS 和 Google Maps SDK for iOS 公用程式庫。
• 正在載入地圖。
• 使用標記、自訂標記和標記叢集。
• 使用 Maps SDK for iOS 事件系統為使用者提供互動功能。
• 透過程式輔助方式控制地圖相機。
• 在地圖上繪圖。

軟硬體需求

要完成本程式碼研究室，您需要下列帳戶、服務和工具：

• Xcode 12.0 以上版本 (目標 SDK 為 12.0 以上版本)。
• 已安裝 Cocoapods。
• 已啟用帳單功能的 Google Cloud Platform 帳戶 (請參閱下一步)。
• Cloud Console 中已啟用 Maps SDK for iOS 的專案 (請參閱下一步)。

2. 做好準備

在下方啟用啟用步驟時，您必須啟用 Maps SDK for iOS。

設定 Google 地圖平台

如果您還沒有 Google Cloud Platform 帳戶和已啟用計費功能的專案，請參閱開始使用 Google 地圖平台指南，建立帳單帳戶和專案。

1. 在 Cloud Console 中按一下專案下拉式選單，然後選取您要用於這個程式碼研究室的專案。

2. 在 Google Cloud Marketplace 中啟用此程式碼研究室所需的 Google 地圖平台 API 和 SDK。詳細步驟請參閱這部影片或這份文件。
3. 在 Cloud Console 的「憑證」頁面中產生 API 金鑰。你可以按照這部影片或這份說明文件中的步驟進行。傳送至 Google 地圖平台的所有要求都需要 API 金鑰。

快速入門導覽課程

以下提供一些入門程式碼，協助您快速上手，幫助您快速上手。

1. 如果您已安裝 git，請複製存放區。

git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

或者，您也可以按一下 [將驗證碼提供給我]，以下載原始碼。

提供驗證碼

2. 下載程式碼後，開啟 /starter 目錄中的 StarterApp 專案。這項專案包含完成程式碼研究室所需的基本檔案結構。您所需的一切都位於/starter/StarterApp目錄中。

如要查看完整的解決方案程式碼，請在 /solution/SolutionApp 目錄中查看已完成的程式碼。

3. 安裝 Maps SDK for iOS

使用 Maps SDK for iOS 的第一步，就是安裝必要的依附元件。這個程序包含兩個步驟：從 Cocoapods 依附元件管理員安裝 Maps SDK for iOS 和 Maps SDK for iOS 公用程式庫，然後將您的 API 金鑰提供給 SDK。

1. 將 Maps SDK for iOS 和 Maps SDK for iOS 公用程式庫加入 Podfile。

此程式碼研究室會同時使用 Maps SDK for iOS (提供 Google 地圖的所有核心功能) 和 Maps iOS 公用程式庫 (其中提供多種公用程式，讓地圖內容更加豐富，包括標記叢集)。

首先，請在 Xcode (或您偏好的文字編輯器) 中開啟 Podfile 並更新檔案，在註解 # Pods for StarterApp 中加入 Maps SDK for iOS 及公用程式庫的依附元件：

pod 'GoogleMaps', '6.1.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

查看 Maps SDK for iOS 版本說明文件，以取得最新版本的 SDK 以及維護指南。

您的 Podfile 應如下所示：

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '12.0'

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end

2. 安裝 Maps SDK for iOS 和 Maps SDK for iOS 公用程式庫 pod。

如要安裝依附元件，請透過指令列在 /starter 目錄中執行 pod install。Cocoapods 會自動下載依附元件並建立 StarterApp.xcworkspace。

3. 依附元件安裝完畢後，請從 /starter 目錄執行 open StarterApp.xcworkspace，以 Xcode 開啟檔案，然後利用 iPhone 模擬工具執行應用程式，方法是按下 Command+R。如果設定正確，模擬工具就會啟動並顯示黑色畫面。別擔心，您尚未建構任何項目，因此這是可預期的情況！
4. 在 AppDelegate.swift 中匯入 SDK。

現在，您的依附元件已經安裝完畢，現在就可以將您的 API 金鑰提供給 SDK。第一步是在 import UIKit 匯入陳述式下方插入 Maps SDK for iOS，做為依附元件：

import GoogleMaps

5. 在 application: didFinishLaunchingWithOptions: 上GMSServices 呼叫 provideAPIKey，將 API 金鑰傳送至 iOS SDK

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

更新後的 AppDelegate.swift 檔案現在應如下所示：

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

將 YOUR_API_KEY 替換成您在 Cloud Console 中建立的 API 金鑰。

現在您已經安裝依附元件並提供 API 金鑰，就可以開始呼叫 Maps SDK for iOS。

4. 顯示地圖

是時候顯示您的首張地圖了！

Maps SDK for iOS 最常用的部分是 GMSMapView 類別，該類別有許多方法可讓您建立和操控地圖執行個體。我們來做到了！

1. 開啟 ViewController.swift。

在這裡，您將完成程式碼研究室的其餘工作。請注意，視圖控制器的 loadView 和 viewDidLoad 生命週期事件已經暫停。

2. 只要在檔案最上方加入 Maps SDK for iOS，即可匯入：

import GoogleMaps

3. 宣告 ViewController 執行個體變數以儲存 GMSMapView。

GMSMapView 的執行個體是您在這個程式碼研究室中處理的主要物件，並透過各種檢視控制器生命週期方法對物件執行動作並做出回應。如要提供該變數，請更新 ViewController 的實作，以宣告儲存變數：

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

4. 在 loadView 中，建立 GMSCameraPosition 的執行個體。

GMSCameraPosition 會定義地圖置中的位置，並顯示縮放等級。這段程式碼呼叫 cameraWithLatitude:longitude:zoom: 方法，將地圖中心設在澳洲雪梨，緯度為 -33.86，經度為 151.20，縮放等級為 12：

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)

5. 在 loadView 中，建立 GMSMapView 的執行個體，將地圖執行個體化。

如要建立新的地圖執行個體，請呼叫 GMSMapView(frame: CGRect, camera: GMSCameraPosition)。請注意，框架的設定為 CGRect.zero，這是來自 iOS CGGeometry 程式庫的全域變數，它指定位於視圖控制器內位置 (0,0) 的寬度為 0、寬度為 0 的畫格。相機已設為你剛建立的相機位置。

接下來，如要顯示地圖，請將檢視控制器的根視圖設為 mapView，讓地圖以全螢幕顯示。

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView

6. 將 GMSMapViewDelegate 設為檢視控制器。

實作地圖檢視委派功能後，您就能處理來自 GMSMapView 執行個體的使用者互動事件，但之後會用到。

首先，更新ViewController的接口符合GMSMapViewDelegate:的通訊協定

class ViewController: UIViewController, GMSMapViewDelegate

接著，在 loadView 函式中加入這個函式，即可將 GMSMapViewDelegate 設為 ViewController。

    mapView.delegate = self

現在，請在 iOS 模擬工具 (Command+R) 中重新載入應用程式，地圖應該會如圖 1 所示！

圖 1. iOS 應用程式顯示 Google 地圖。

我們來複習一下，在這個步驟中，您建立了 GMSMapView 的執行個體來顯示以澳洲雪梨為中心的地圖。

您的 ViewController.swift 檔案現在應如下所示：

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5. 設定地圖樣式 (選用)

您可以使用雲端式地圖樣式設定功能自訂地圖樣式。

建立地圖 ID

如果您尚未建立具有相關地圖樣式的地圖 ID，請參閱地圖 ID 指南，完成以下步驟：

1. 建立地圖 ID。
2. 將地圖 ID 與地圖樣式建立關聯。

注意：在 Maps SDK for Android 或 Maps SDK for iOS 中使用地圖 ID 會觸發系統載入地圖載入作業，費用則會計入 Dynamic Maps SKU。詳情請參閱 Google 地圖帳單。

在應用程式中加入地圖 ID

如要使用您在上一個步驟中建立的地圖 ID，請開啟 ViewController.swift 檔案，然後在 loadView 方法中建立 GMSMapID 物件，並提供地圖 ID。接著，提供 GMSMapID 物件做為參數來修改 GMSMapView 執行個體化。

ViewController.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

完成此操作後，執行應用程式以您選擇的樣式來查看地圖！

6. 在地圖中新增標記

使用 Maps SDK for iOS 時，開發人員的功用有很多種，但在地圖上顯示標記絕對是最受歡迎的功能。標記可顯示在地圖上的特定點，也是處理使用者互動的常見 UI 元素。如果您曾經使用過「Google 地圖」，那麼您可能很熟悉預設標記，如下所示：圖 2 中的紅色圖釘：

圖 2：含有紅色標記的地圖。

此步驟示範如何使用 GMSMarker 類別在地圖上放置標記。

請注意，在檢視控制器的 loadView 生命週期事件中，從地圖載入上一個步驟後，地圖才能放置標記；因此，請在載入檢視 (和地圖) 之後，在 viewDidLoad 生命週期事件中完成這些步驟。

1. 定義 CLLocationCoordinate2D 物件。

CLLocationCoordinate2D 是由 iOS CoreLocation 程式庫提供的結構，它會定義固定的經緯度位置。如要開始建立第一個標記，請定義 CLLocationCoordinate2D 物件，並將緯度和經度設為地圖的中心。地圖中心的座標是使用 camera.target.latitude 和 camera.target.longitude 屬性從地圖檢視來存取。

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)

2. 建立 GMSMarker 的執行個體。

Maps SDK for iOS 提供 GMSMarker 類別。GMSMarker 的每個例項都代表地圖上的個別標記，是藉由呼叫 markerWithPosition: 並傳送 CLLocationCoordinate2D 物件的方式告知 SDK 在地圖上放置標記的位置。

    let marker = GMSMarker(position: mapCenter)

3. 設定自訂標記圖示。

「Google 地圖」的預設紅色圖釘標記是很棒的工具，但也已經開始自訂地圖了！不過別擔心，有了 Maps SDK for iOS，使用自訂標記非常簡單。請注意，StartApp 專案內含名為「custom_pin.png&#39」的圖片，可供您使用，不過您可以使用任何您想要使用的圖片。

如要設定自訂標記，請將標記的 icon 屬性設為 UIImage 的例項。

    marker.icon = UIImage(named: "custom_pin.png")

4. 將標記繪製成地圖。

您的標記已建立，但地圖上尚未顯示。方法是將 GMSMarker 執行個體的 map 屬性設為 GMSMapView 的執行個體。

    marker.map = mapView

現在重新載入應用程式，並使用第一個標記來標記第一個地圖，如圖 3 所示！

圖 3. iOS 版 Google 地圖應用程式，中央有一個紅色標記。

我們來複習一下，您在此部分中建立了 GMSMarker 類別的實例，並套用至地圖檢視，以在地圖上顯示標記。您在 ViewController.swift 中更新的 view 最多載入生命週期事件現在應該如下所示：

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

7. 啟用標記叢集

如果您使用的標記數量過多，或是標記彼此靠近，這可能會發生標記重疊或重疊在一起的問題，導致使用者體驗不佳。舉例來說，如果兩個標記之間的距離非常接近，最後情況就會如圖 4 所示：

圖 4. 兩個標記彼此相鄰。

這時，標記叢集就能派上用場。標記叢集是另一項常見的實作功能，可將鄰近的標記歸入同一個圖示，並根據縮放等級變更，如圖 5 所示：

圖 5.以單一圖示分組的標記範例。

標記叢集演算法會將地圖可見區域分成一個網格，然後在同一個儲存格中對叢集圖示進行分組。Google 地圖平台小組建立了實用的開放原始碼公用程式程式庫，名為 Google Maps SDK for iOS 公用程式庫，可自動處理許多標記作業。如要進一步瞭解標記叢集，請參閱 Google 地圖平台說明文件，或查看 GitHub 上的 iOS 公用程式庫來源。

1. 在地圖中加入更多標記。

如要查看標記叢集實際運作的情形，您必須在地圖上累積許多標記。為方便您進行這項作業，我們在 MarkerGenerator.swift 的新手專案中提供了便利的標記產生器。

如要在地圖中加入指定數量的標記，請在上一個步驟的程式碼下方，在檢視控制器的 viewDidLoad 生命週期內呼叫 MarkerGenerator(near:count:).markerArray。這個方法會在 CLLocationCoordinate2D 物件中指定的座標周圍建立隨機位置的 count 標記數量。在這種情況下，您可以傳送先前建立的 mapCenter 變數。標記會在 [GMSMarker] 中傳回。

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

如要測試這些標記的外觀，請在 markerArray 的定義之後新增這些行，然後執行應用程式。請務必先將這些線條加上註解，再進行下一個步驟，使用標記叢集管理標記的顯示方式：

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }

2. 匯入 Google Maps SDK for iOS 公用程式庫。

如要將 Maps iOS 公用程式庫新增為專案的依附元件，請將該檔案加進 ViewController.swift 頂端的依附元件清單：

import GoogleMapsUtils

3. 設定標記叢集。

若要使用標記叢集，您必須提供三項功能來設定其運作方式：分群演算法、圖示產生器及轉譯器。演算法可決定標記叢集方式的行為，例如要納入同一個叢集的標記之間的距離。圖示產生器提供叢集圖示，供不同縮放等級使用。轉譯器會處理地圖上叢集圖示的實際轉譯。

您可以視需要自行撰寫以上所有資訊，但 Maps iOS 公用程式庫提供了預設實作功能，方便您完成修改。新增：

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)

4. 建立 GMUClusterManager 的執行個體。

GMUClusterManager 是類別，會使用您指定的演算法、圖示產生器和轉譯器來實作標記叢集。如要建立轉譯器並將地圖提供給地圖檢視，請先在 ViewController 實作中新增一個執行個體變數，以儲存叢集管理員執行個體：

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

接著，在 viewDidLoad 生命週期事件中建立 GMUClusterManager 例項：

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

5. 新增標記並執行標記叢集。

現在您已設定標記叢集執行個體，請呼叫 add(items:) 來向叢集管理員傳送要分群的標記陣列，然後呼叫 cluster 以執行叢集叢集。

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

重新載入應用程式後，您應該會看到許多如圖 6 中的範例都經過妥善分類。用雙指撥動並縮放地圖，就能盡情探索不同的縮放等級，這樣當縮放/縮小時，標記叢集就會隨之調整。

圖 6. 包含 Google 地圖和叢集標記的 iOS 應用程式。

我們來複習一下，在這個步驟中，您從 Google Maps SDK for iOS 公用程式庫設定了標記叢集執行個體，然後用來將 100 個標記在地圖上分類。「ViewController.swift」中的「viewDidLoad」生命週期事件現在應如下所示：

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

8. 新增使用者互動

您現在擁有絕佳的地圖，可顯示標記並使用標記叢集。在這個步驟中，您將使用之前針對資料檢視檢視控制項 GMSMapViewDelegate 新增的額外使用者互動處理方式，以改善使用者的地圖使用體驗。

Maps SDK for iOS 提供全方位的地圖系統，可透過地圖檢視委派功能實作，其中包括各種事件處理常式，能在發生使用者互動時執行程式碼。舉例來說，「MapsView 委任代表」包含了可觸發互動程式碼執行動作的方法，例如按一下地圖和標記、平移地圖檢視、放大和縮小等等。

在此步驟中，您會透過程式平移地圖至使用者輕觸的標記中心。

1. 導入標記輕觸事件監聽器。

每次使用者輕觸您先前建立的其中一個標記，且使用者輕觸標記叢集 (內部標記叢集即實作 GMSMarker 的執行個體) 時，都會呼叫 mapView(_:didTap:)。

如要導入事件監聽器，請先在 ViewController.swift 底部將事件展開，然後關閉大括號。

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

請注意，此方法會傳回 false。這麼做會指示 iOS SDK 在執行事件處理常式程式碼後，繼續執行預設的 GMSMarker 功能，例如顯示資訊視窗 (如有設定)。

2. 在輕觸標記或標記叢集時，處理輕觸事件，並以動畫方式將地圖置於最近的位置。

呼叫 mapView(_:didTap:) 時，系統會傳送已輕觸的 GMSMarker 例項，方便您在程式碼中處理。您可以使用這個例項，從事件處理常式內呼叫地圖檢視上的 animate(toLocation:)，並傳送標記執行個體的位置 (從 position 屬性傳送) 來更新地圖。

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

3. 輕按標記叢集即可放大地圖。

常見的使用者體驗模式是輕觸標記叢集時放大。可讓使用者查看叢集標記，因為叢集在低縮放等級時會展開。

如前文所述，標記叢集圖示實際上是 GMSMarker 的實作與自訂圖示。那麼，該如何判斷使用者是否已輕觸標記或標記叢集？當標記叢集管理員建立新的叢集圖示時，會實作 GMSMarker 的執行個體，使其符合名為 GMUCluster. 的通訊協定。您可以使用條件來檢查傳送至事件處理常式的標記是否符合此通訊協定。

透過程式輔助方式瞭解叢集已經輕觸後，您可以在地圖檢視執行個體上呼叫 animate(toZoom:)，並將縮放等級設為目前的縮放等級，再加一個 。目前的縮放等級可在 camera.zoom 屬性的 mapView 執行個體上取得。

此外，請注意以下程式碼如何傳回 true。這會告知事件處理常式已完成處理事件，且不再在處理常式中執行其他程式碼。原因之一是防止基礎 GMSMarker 物件執行其他預設行為，例如顯示資訊視窗。在輕觸叢集圖示時，這會十分合理。

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

現在重新載入應用程式，然後輕觸一些標記和標記叢集。只要輕觸 ，該元素在輕觸後的元素上就會較新。只要輕觸標記叢集，地圖便會放大一個縮放等級，標記叢集則會展開並顯示下方列出的標記。

總而言之，在這個步驟中，您實作了標記輕觸事件監聽器，並處理事件在輕觸的元素的較新事件中，以及該元素是否為標記叢集圖示。

您的 mapView(_:didTap:) 方法如下所示：

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

9. 在地圖上繪圖

到目前為止，您建立了雪梨地圖，其中以 100 個隨機點顯示標記，並處理使用者互動。在本程式碼研究室的最後一個步驟中，您使用了 Maps SDK for iOS 的繪圖功能，為地圖體驗加入額外的實用功能。

假設這張地圖將由想要探索雪梨市的使用者使用。有用就是在使用者點擊標記時，以視覺化方式呈現標記周圍的半徑範圍。讓使用者只要按一下滑鼠，就能輕易得知其他目的地的距離。

iOS SDK 包含一組用來在地圖上繪製圖形的函式，例如方形、多邊形、線條和圓形。在這個步驟中，只要點擊圓圈，即可顯示一個標記周圍 800 公尺 (約半英里) 的半徑範圍。

1. 將 circle 執行個體變數新增至 ViewController。

此執行個體變數是用來儲存最近繪製的圓圈，使其可以在其他繪圖之前被刪除。畢竟，對使用者而言，這並不有幫助，如果每個輕觸的標記都周圍有圓環，那就再好不過了！

如要更新程式碼，請依照下列方式更新 ViewController 的實作：

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}

2. 輕觸標記時繪製圓圈。

在 mapView(_:didTap:) 方法的底部，在 return false 陳述式的上方，加入此處顯示的程式碼，以建立 iOS SDK'GMSCircle 類別的執行個體，以呼叫 GMSCircle(position:radius:) 來擷取新的 800 公尺半徑圓形區域，並傳送您輕觸標記的位置，方法如同您最近一次將地圖放置在哪個位置。

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)

3. 設定圓形樣式。

根據預設，GMSCircle 會繪製一個有黑色筆劃的透明圓圈。雖然這有助於顯示半徑範圍，但看起來看似不好，也有些困難。接著，將 UIColor 指派給圓形的 fillColor 屬性，讓圓形填滿顏色，藉此提升樣式。這裡顯示的程式碼是以 50% 透明度顯示灰色填充字元：

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)

4. 在地圖上算繪圓圈。

就像您之前建立標記一樣，建立 GMSCircle 的例項並不會在地圖上顯示。方法是將地圖檢視執行個體指派給圓形的 map 屬性。

    circle?.map = mapView

5. 移除所有先前轉譯的社交圈。

如前文所述，在地圖中新增社交圈，不見得提供良好的使用者體驗。如要移除先前輕觸事件顯示的圓圈，請將 circle 的 map 屬性設為 nil 的 mapView(_:didTap:)。

    // Clear previous circles
    circle?.map = nil

重新載入應用程式，然後輕觸標記。您輕觸標記時，應該會看到新的圓圈，如前圖所示，移除標記時，任何之前轉譯的圓圈都會被移除。

圖 7. 在圓形輕觸標記周圍畫圓圈。

我們來複習一下，您在這個步驟中使用了 GMSCircle 類別，在使用者輕觸標記時要顯示圓形。

mapView(_:didTap:) 方法應如下所示：

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. 恭喜

你已成功建構含有互動式 Google 地圖的 iOS 應用程式。

您學到的內容

• 載入和設定 Maps SDK for iOS 和 Google Maps SDK for iOS 公用程式庫
• 載入地圖
• 設定樣式地圖
• 使用標記、自訂標記和標記叢集
• 事件系統：用來提供使用者互動
• 透過程式輔助方式控制地圖相機
• 在地圖上繪圖

後續步驟

• 探索或建立 maps-sdk-for-ios-samples GitHub 存放區範例和示範，從中汲取更多靈感
• 學習更多 Swift 程式碼研究室，瞭解如何透過 Google 地圖平台建構 iOS 應用程式
• 請回答下列問題，協助我們製作您覺得最實用的內容：

您還想查看其他程式碼研究室嗎？

在地圖上顯示資料視覺化 進一步瞭解如何自訂地圖樣式 在地圖上建立 3D 互動

上方未列出您所需的程式碼研究室嗎？請在這裡提出新的問題。