在 iOS 應用程式中加入地圖 (Objective-C)

1. 事前準備

摘要

在本程式碼研究室中，您將瞭解如何開始使用 Google 地圖平台，以 Objective-C 建構 iOS 應用程式。您將瞭解所有基本概念，包括如何設定及載入 Maps SDK for iOS、顯示第一張地圖、使用標記和標記叢集、在地圖上繪製內容，以及處理使用者互動。

建構項目

在本程式碼研究室中，您將建構一個 iOS 應用程式，該應用程式會執行下列操作：

• 載入 Maps SDK for iOS 和 Maps SDK for iOS 公用程式庫
• 顯示以澳洲雪梨為中心的地圖
• 顯示雪梨周邊 100 個地點的自訂標記
• 實作標記叢集
• 啟用使用者互動功能，在點選標記時重新置中並在地圖上繪製圓圈

課程內容

• 開始使用 Google 地圖平台
• 載入 Maps SDK for iOS 和 Google Maps SDK for iOS 公用程式庫
• 載入地圖
• 使用標記、自訂標記和標記叢集
• 使用 Maps SDK for iOS 事件系統提供使用者互動
• 以程式輔助方式控制地圖
• 在地圖上繪圖

必要條件

如要完成本程式碼研究室，請務必熟悉下列項目。如果您已熟悉 Google 地圖平台，請直接前往程式碼研究室！

必要 Google 地圖平台產品

在本程式碼研究室中，您將使用下列 Google 地圖平台產品：

• Maps SDK for iOS
• Google Maps SDK for iOS 公用程式庫

開始使用 Google 地圖平台

如果您從未使用過 Google 地圖平台，請按照「開始使用 Google 地圖平台」指南或「開始使用 Google 地圖平台」播放清單中的操作說明，完成下列步驟：

1. 建立帳單帳戶。
2. 建立專案。
3. 啟用 Google 地圖平台 API 和 SDK (如上一節所列)。
4. 產生 API 金鑰。

注意：註冊時，你必須登入現有 Google 帳戶或建立新帳戶。

本程式碼研究室的其他需求條件

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

• 已啟用計費功能的 Google Cloud Platform 帳戶
• 已啟用 Maps SDK for iOS 的 Google 地圖平台 API 金鑰
• 具備 Objective-C 的基本知識
• Xcode 12.0，目標 SDK 為 12.0 以上版本

2. 做好準備

如要完成下方的啟用步驟，您需要啟用 Maps SDK for iOS。

設定 Google 地圖平台

如果您尚未建立 Google Cloud Platform 帳戶，以及啟用計費功能的專案，請參閱「開始使用 Google 地圖平台」指南，建立帳單帳戶和專案。

1. 在 Cloud 控制台中，按一下專案下拉式選單，然後選取要用於本程式碼研究室的專案。

2. 在 Google Cloud Marketplace 中，啟用本程式碼研究室所需的 Google 地圖平台 API 和 SDK。如要瞭解如何操作，請觀看這部影片或參閱這份說明文件。
3. 在 Cloud Console 的「憑證」頁面中產生 API 金鑰。你可以按照這部影片或這份文件中的步驟操作。所有 Google 地圖平台要求都需要 API 金鑰。

設定專案入門範本

開始本程式碼研究室之前，請先下載範例專案範本和完整解決方案程式碼：

1. 前往 https://github.com/googlecodelabs/maps-platform-101-objc，下載或複製本程式碼研究室的 GitHub 存放區。

StarterApp 專案位於 /starter 目錄中，內含完成程式碼研究室所需的基礎檔案結構。所有工作所需項目都位於 /starter/StarterApp 目錄中。

如要查看完整的解決方案程式碼，請完成上述設定步驟，並在 /solution/SolutionApp 目錄中查看解決方案。

3. 安裝 Maps SDK for iOS

使用 Maps SDK for iOS 的第一步是安裝必要依附元件。這個程序分為兩個步驟：從 Cocoapods 依附元件管理工具安裝 Maps SDK for iOS 和 Maps SDK for iOS 公用程式庫，然後向 SDK 提供 API 金鑰。

1. 將 Maps SDK for iOS 和 Maps SDK for iOS 公用程式庫新增至 Podfile。

在本程式碼研究室中，您將使用 Maps SDK for iOS (提供所有 Google 地圖的核心功能) 和 Maps iOS 公用程式庫 (提供各種公用程式來豐富地圖，包括標記叢集)。

首先，在 Xcode (或您偏好的文字編輯器) 中開啟 Pods > Podfile，並更新檔案，在 use_frameworks! 下方加入 Maps SDK for iOS 和公用程式庫依附元件：

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

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

如要安裝依附元件，請透過指令列在 /starter 目錄中執行 pod install。Cocoapods 會自動下載依附元件，並建立 StarterApp.xcworkspace。3. 安裝依附元件後，請在 Xcode 中開啟 StarterApp.xcworkspace，然後按下 Command+R，在 iPhone 模擬器中執行應用程式。如果一切設定正確，模擬器就會啟動並顯示黑畫面。別擔心，您尚未建構任何內容，因此這是正常現象！4. 在 AppDelegate.h 中匯入 SDK。

依附元件安裝完成後，請將 API 金鑰提供給 SDK。第一步是匯入 Maps SDK for iOS 做為依附元件，方法是在 #import "AppDelegate.h" 匯入陳述式下方加入下列內容：

@import GoogleMaps;

5. 在 iOS SDK 匯入陳述式下方，宣告 NSString 常數，並將值設為您的 API 金鑰：

static NSString *const kMapsAPIKey = @"YOUR API KEY";

6. 在 application: didFinishLaunchingWithOptions: 中對 GMSServices 呼叫 provideAPIKey，將 API 金鑰傳遞至 iOS SDK

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

更新後的 AppDelegate.m 檔案應如下所示：

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

您的 Podfile 應如下所示：

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

target 'StarterApp' do
  use_frameworks!

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

end

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

4. 顯示地圖

現在要顯示第一張地圖了！

Maps SDK for iOS 最常用的部分是 GMSMapView 類別，其中提供許多方法，可供您建立及操控地圖例項。方法如下。

1. 開啟 ViewController.m。

您將在本程式碼研究室的其餘部分，完成所有剩餘工作。您會發現系統已為檢視畫面控制器建立 loadView 和 viewDidLoad 生命週期事件的虛設常式。2. 在檔案頂端加入下列內容，匯入 Maps SDK for iOS：

@import GoogleMaps;

3. 宣告 ViewController 例項變數，儲存 GMSMapView。

GMSMapView 的執行個體是您在本程式碼研究室中使用的主要物件，您將從各種檢視區塊控制器生命週期方法中參照及處理該物件。如要提供這項資訊，請更新 ViewController 的實作方式，宣告執行個體變數來儲存這項資訊：

@implementation ViewController {
  GMSMapView *_mapView;
}

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

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

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

5. 在 loadView 中，建立 GMSMapView 的例項，將地圖例項化。

如要建立新的地圖例項，請呼叫 mapWithFrame:camera:。請注意，影格設為 CGRectZero，這是 iOS CGGeometry 程式庫的全球變數，用於指定寬度為 0、高度為 0 的影格，位於檢視畫面控制器內的 (0,0) 位置。攝影機會設為您剛建立的攝影機位置。

如要實際顯示地圖，接下來請將檢視控制器的根層級檢視區塊設為 _mapview，地圖就會以全螢幕模式顯示。

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

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

實作後，地圖檢視區塊委派可讓您處理 GMSMapView 執行個體上的使用者互動事件，這在後續步驟中會用到。

首先，請更新 ViewController 的介面，以符合 GMSMapViewDelegate: 的通訊協定

@interface ViewController ()<GMSMapViewDelegate>

接著，新增下列內容，將 GMSMapViewDelegate 設為 ViewController。

_mapView.delegate = self;

現在在 iOS 模擬器中重新載入應用程式 (Command+R)，地圖應該就會顯示！

回顧一下，在這個步驟中，您建立了 GMSMapView 的執行個體，顯示以澳洲雪梨市為中心的地圖。

您的 ViewController.m 檔案現在看起來應像這樣：

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

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

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

建立地圖 ID

如果尚未建立地圖 ID 並與地圖樣式建立關聯，請參閱「地圖 ID」指南，完成下列步驟：

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

注意：如果您在 Maps SDK for Android 或 Maps SDK for iOS 中使用地圖 ID，將會觸發地圖載入作業，費用則會計入 Dynamic Maps SKU。詳情請參閱「Google 地圖計費方式」一文。

在應用程式中加入地圖 ID

如要使用上一步建立的地圖 ID，請開啟 ViewController.m 檔案，並在 loadView 方法中建立 GMSMapID 物件，然後提供地圖 ID。接著，提供 GMSMapID 物件做為參數，修改 GMSMapView 例項。

ViewController.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

完成後，請執行應用程式，查看所選樣式的地圖！

6. 在地圖中加入標記

開發人員可透過 Maps SDK for iOS 執行許多操作，但最受歡迎的絕對是在地圖上放置標記。標記可讓您在地圖上顯示特定點，是處理使用者互動的常見 UI 元素。如果您使用過 Google 地圖，可能對預設標記很熟悉，如下所示：

在本步驟中，您將瞭解如何使用 GMSMarker 類別在地圖上放置標記。

請注意，地圖從檢視控制器 loadView 生命週期事件載入後，才能在地圖上放置標記，因此您會在 viewDidLoad 生命週期事件中完成這些步驟，該事件會在檢視畫面 (和地圖) 載入後呼叫。

1. 定義 CLLocationCoordinate2D 物件。

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

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);

2. 建立 GMSMarker 的執行個體。

Maps SDK for iOS 提供 GMSMarker 類別。每個 GMSMarker 例項都代表地圖上的個別標記，並透過呼叫 markerWithPosition: 建立，然後將 CLLocationCoordinate2D 物件傳遞至該例項，告知 SDK 在地圖上放置標記的位置.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

3. 設定自訂標記圖示。

Google 地圖的預設紅色圖釘標記很棒，但自訂地圖也很不錯！幸好，使用 Maps SDK for iOS 時，自訂標記非常簡單。您會發現 StarterApp 專案包含名為「custom_pin.png」的圖片，供您使用，但您也可以使用任何圖片。

如要設定自訂標記，請將標記的 icon 屬性設為 UIImage 的執行個體。

marker.icon = [UIImage imageNamed:@"custom_pin.png"];

4. 將標記算繪到地圖上。

標記已建立，但您會發現地圖上沒有這個標記。如要這麼做，請將 GMSMarker 執行個體的 map 屬性設為 GMSMapView 的執行個體。

marker.map = _mapView;

現在重新載入應用程式，您就會看到第一個含有標記的地圖！

回顧一下，在本節中，您建立了 GMSMarker 類別的例項，並將其套用至地圖檢視區塊，在地圖上顯示標記。ViewController.m 中更新後的 viewDidLoad 生命週期事件現在應如下所示：

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

7. 啟用標記叢集功能

如果使用大量標記或彼此距離很近的標記，可能會發生標記重疊或過於擁擠的問題，導致使用者體驗不佳。舉例來說，如果兩個標記非常靠近，可能會出現以下情況：

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

標記叢集演算法會將地圖的可見區域劃分為格線，然後將同一儲存格中的圖示叢集化。幸好您不必擔心這些問題，因為 Google 地圖平台團隊已建立實用的開放原始碼公用程式庫，也就是 Google Maps SDK for iOS 公用程式庫。這個程式庫會自動處理標記叢集，以及許多其他事項。如要進一步瞭解標記叢集，請參閱 Google 地圖平台說明文件，或前往 GitHub 查看 iOS 公用程式程式庫的來源。

1. 在地圖中新增更多標記。

如要查看標記叢集的實際運作情形，地圖上必須有大量標記。為簡化這項作業，LocationGenerator.m 的新手範例專案中提供便利的標記產生器。

如要在地圖中新增任意數量的標記，只要在檢視畫面控制器的 viewDidLoad 生命週期中，呼叫上一個步驟的程式碼下方的 generateMarkersNear:count: 即可。這個方法會在 count 中指定的標記數量，在 CLLocationCoordinate2D 物件中指定的座標周圍隨機位置建立標記。在本例中，您只要將先前建立的 mapCenter 變數傳遞給它即可。標記會以 NSArray 傳回。

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

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

如要將 Maps iOS 公用程式庫新增為專案的依附元件，請在 ViewController.m 頂端的依附元件清單中加入下列項目：

@import GoogleMapsUtils;

3. 設定標記叢集。

如要使用標記叢集器，您必須提供三項資訊來設定運作方式：叢集演算法、圖示產生器和算繪器。演算法會決定標記的叢集方式，例如要納入同一叢集的標記之間的距離。圖示產生器會提供不同縮放等級使用的叢集圖示。算繪器會處理地圖上叢集圖示的實際算繪作業。

您可以從頭編寫所有這些項目，但 Google 地圖 iOS 公用程式庫提供預設實作項目，可簡化這個程序。只要新增下列內容即可：

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

4. 建立 GMUClusterManager 的執行個體。

GMUClusterManager 類別會實作標記叢集，並使用您指定的演算法、圖示產生器和轉譯器。如要建立算繪器並提供給地圖檢視區塊，請先將例項變數新增至 ViewController 實作，以儲存叢集管理工具例項：

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

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

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

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

標記叢集工具執行個體設定完成後，您只需呼叫 addItems: 將要叢集的標記陣列傳遞至叢集管理工具，然後呼叫 cluster 執行叢集工具即可。

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

重新載入應用程式，現在應該會看到大量標記整齊地叢集在一起。請在不同縮放等級下操作地圖，看看標記叢集如何隨著縮放調整。

回顧一下，在這個步驟中，您從 Google Maps SDK for iOS 公用程式庫設定了標記叢集工具的執行個體，然後用來將地圖上的 100 個標記叢集化。ViewController.m 中的 viewDidLoad 生命週期事件現在應如下所示：

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems:markerArray];
  [_clusterManager cluster];
}

8. 加入使用者互動

現在您已建立美觀的地圖，可顯示標記並使用標記叢集功能。在這個步驟中，您將使用先前設為檢視畫面控制器的 GMSMapViewDelegate，新增一些使用者互動的處理方式，以改善地圖的使用者體驗。

Maps SDK for iOS 提供完善的事件系統，透過地圖檢視區塊委派實作，當中包含事件處理常式，可讓您在發生各種使用者互動時執行程式碼。舉例來說，mapview 委派項目包含的方法可讓您觸發互動的程式碼執行作業，例如使用者點選地圖和標記、平移地圖檢視畫面、放大及縮小等。

在這個步驟中，您將以程式輔助方式，讓地圖平移，將使用者輕觸的任何標記置中。

1. 實作標記輕觸事件監聽器。

每當使用者輕觸您先前建立的其中一個標記，以及輕觸標記叢集時 (標記叢集在內部會實作為 GMSMarker 的執行個體)，系統都會呼叫 mapView:didTapMarker。

如要實作事件監聽器，請先在 ViewController.m 底部的 end 陳述式之前，將其存根化。

您會發現這個方法會傳回 NO。這樣做會告知 iOS SDK 繼續執行預設的 GMSMarker 功能，例如在執行事件處理常式程式碼後，顯示已設定的資訊視窗。

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}

2. 處理輕觸事件，並在輕觸標記或標記叢集時，將攝影機動畫設為地圖重新置中。

呼叫時，mapView:didTapMarker 會傳遞輕觸的 GMSMarker 例項，方便您在程式碼中處理。您可以使用這個例項，從事件處理常式內部呼叫地圖檢視畫面上的 animateToLocation:，並將標記例項的位置傳遞至 position 屬性，即可重新置中地圖。

[_mapView animateToLocation:marker.position];

3. 輕觸標記叢集時放大。

常見的使用者體驗模式是，在輕觸標記叢集時放大顯示。這樣一來，使用者就能查看叢集標記，因為叢集會在較低的縮放等級展開。

如先前所述，標記叢集圖示實際上只是實作 GMSMarker 時使用的自訂圖示。那麼，如何判斷使用者輕觸的是標記還是標記叢集？標記叢集管理工具建立新的叢集圖示時，會實作 GMSMarker 的執行個體，以符合名為 GMUCluster. 的通訊協定。您可以使用條件式，檢查傳遞至事件處理常式的標記是否符合這項通訊協定。

以程式輔助方式得知叢集遭到輕觸後，您可以在地圖檢視區塊執行個體上呼叫 animateToZoom:，並將縮放等級設為目前的縮放等級加一。地圖檢視區塊執行個體的 camera.zoom 屬性會提供目前的縮放等級。

此外，請注意下方程式碼如何傳回 YES。這會告知事件處理常式您已完成事件處理，且不要在處理常式中執行任何其他程式碼。這麼做的原因之一，是為了防止基礎 GMSMarker 物件執行其餘預設行為，例如顯示資訊視窗，這在輕觸叢集圖示時沒有多大意義。

if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

現在重新載入應用程式，然後輕觸一些標記和標記叢集。輕觸任一元素時，地圖會以該元素為中心。輕觸標記叢集時，地圖也會放大一個等級，標記叢集會展開，顯示下方叢集的標記。

回顧一下，在這個步驟中，您實作了標記輕觸事件監聽器，並處理事件，以便在輕觸的元素上重新置中，以及在該元素是標記叢集圖示時放大。

您的 mapView:didTapMarker 方法應如下所示：

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

9. 在地圖上繪圖

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

假設使用者想探索雪梨市，並使用這張地圖。如果點選標記時能顯示半徑，會是很有用的功能。這樣一來，使用者就能輕鬆瞭解點選的標記附近有哪些其他目的地。

iOS SDK 包含一組函式，可在地圖上繪製形狀，例如正方形、多邊形、線條和圓形。接著，您將算繪圓圈，在點選標記時，顯示標記周圍 800 公尺 (約半英里) 的半徑。

1. 在 ViewController 的實作中新增 _circ 執行個體變數。

這個執行個體變數會用於儲存最近繪製的圓形，以便在繪製另一個圓形前銷毀該圓形。畢竟，如果每個輕觸的標記都加上圓圈，對使用者來說不會很有幫助，而且看起來相當難看！

如要這麼做，請更新 ViewController 的實作方式，如下所示：

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}

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

在 mapView:didTapMarker 方法底部，新增下列程式碼來建立 iOS SDK 的 GMSCircle 類別例項，並呼叫 circleWithPosition:radius: 傳遞輕觸標記的位置，藉此繪製新的 800 公尺半徑圓形，就像您先前重新置中地圖時一樣。

_circ = [GMSCircle circleWithPosition:marker.position radius:800];

3. 設定圓圈樣式。

根據預設，GMSCircle 會繪製黑色筆觸的圓形，並填滿透明色。這樣可以顯示半徑，但看起來不太美觀，而且有點難以辨識。接著，將 UIColor 指派給圓形的 fillColor 屬性，為圓形填入顏色，改善樣式。以下程式碼會新增 50% 透明度的灰色填滿：

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

4. 在地圖上算繪圓圈。

就像先前建立標記時一樣，您會發現建立 GMSCircle 的例項並不會讓標記顯示在地圖上。如要這麼做，只要將地圖檢視區塊執行個體指派給圓形的 map 屬性即可。

_circ.map = _mapView;

5. 移除先前算繪的圓圈。

如先前所述，如果只是不斷在 Google 地圖上新增圓圈，使用者體驗不會太好。如要移除先前輕觸事件所算繪的圓圈，請將 mapView:didTapMarker 頂端的 _circ map 屬性設為 nil。

_circ.map = nil;

重新載入應用程式，然後輕觸標記。每當輕觸標記時，您應該會看到繪製的新圓圈，以及移除先前算繪的圓圈。

回顧一下，在這個步驟中，您使用了 GMSCircle 類別，在輕觸標記時算繪圓圈。

您的 mapView:didTapMarker 方法應如下所示：

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10. 恭喜

您已使用 Google 地圖平台成功建構第一個 iOS 應用程式，包括載入 Maps SDK for iOS、載入地圖、使用標記、控制地圖及在地圖上繪製內容，以及新增使用者互動。

如要查看完成的程式碼，請找出 /solution 目錄中的完成專案。

後續步驟

在本程式碼研究室中，我們只介紹了 Maps SDK for iOS 的基本功能。接著，嘗試在地圖中加入下列功能：

• 變更地圖類型，即可顯示衛星、混合和地形地圖。
• 自訂其他使用者互動，例如縮放和地圖控制項。
• 加入資訊視窗，在點選標記時顯示資訊。
• 如要在應用程式中加入豐富的 Google 地圖平台地點功能和資料，請參閱 Places SDK for iOS。

如要進一步瞭解如何在網路上使用 Google 地圖平台，請參閱下列連結：

• Maps SDK for iOS 說明文件
• Google 地圖平台 YouTube 頻道
• Google 地圖平台程式碼研究室
• GitHub 上的 Google 地圖平台開放原始碼專案