在 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 基本知識
• 目標程式碼 SDK 為 12.0 或更新版本的 Xcode 12.0

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. 前往 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 公用程式庫，然後將您的 API 金鑰提供給 SDK。

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，然後透過 iPhone 模擬工具執行應用程式 (按 Command+R)。如果設定正確，模擬工具就會啟動並顯示黑色畫面。別擔心，您尚未建構任何項目，因此這是可預期的情況！4. 在 AppDelegate.h 中匯入 SDK。

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

@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&#39」的圖片，不過您可以使用任何所需圖片。

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

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

4. 將標記繪製成地圖。

您的標記已經建立完成，但您卻不會在地圖上看到它。方法是將 GMSMarker 執行個體的 map 屬性設為 GMSMapView 的執行個體。

marker.map = _mapView;

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

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

- (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 的新手專案中提供了便利的標記產生器。

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

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

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

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

@import GoogleMapsUtils;

3. 設定標記叢集。

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

您可以視需要自行撰寫以上所有資訊，但 Maps 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 提供全方位的地圖系統，可透過地圖檢視委派功能實作，其中包括各種事件處理常式，能在發生使用者互動時執行程式碼。舉例來說，「地圖檢視」委派功能包含一些方法，可讓您針對使用者的互動執行程式碼，例如點擊地圖和標記、平移地圖或進行縮放等。

在這個步驟中，您將透過程式化方式，讓地圖平移至使用者輕觸的任何標記。

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

每次使用者輕觸您先前建立的其中一個標記，或是輕觸標記叢集時，系統都會呼叫 mapView:didTapMarker (內部標記叢集會實作為 GMSMarker 的例項)。

如要導入事件監聽器，請先先將事件監聽器移到 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. 將 _circ 執行個體變數新增至 ViewController。

這個執行個體變數將用於儲存最近繪製的圓形，以便在其他繪圖之前將其刪除。畢竟，這項功能對使用者而言沒有幫助，如果每個輕觸的標記都圓有圓環。

如要更新程式碼，請依照下列方式更新 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. 移除所有先前轉譯的社交圈。

如前文所述，如果只是繼續在地圖上新增社交圈，對使用者體驗會不太方便。如要移除先前輕觸事件顯示的圓圈，請將 _circ 的 map 屬性設為 nil 的 mapView:didTapMarker。

_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 的基本功能。接著，請嘗試在地圖中新增下列部分功能：

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

若要繼續探索更多使用 Google 地圖平台網頁版的方法，請參考下列連結：

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