Google Map SDK 實作：如何把Google街景嵌入到你的 iOS App

你是否曾有遇過不知怎麼和你客戶說要如何到你的公司，尤其是當你公司位處郊區鄉間小弄間的話，你可能只能用電話和你客戶解釋如何到你公司以外，現在有個好方式能幫你，就是利用Google街景視角(Google Street View)。

Google街景視角Google Street View – 它應用全景技術擷取街道實景，並在世界各地建置。這是Google在Google Maps上所實現的一個延伸功能，並能讓開發者經由專屬的SDK做相關應用，當然，你也可以整合街景視角做為App的功能特色之一。

當用在不同的應用領域時，你會發現這個功能非常的好用，這有幾個例子做參考：

• 旅遊用途 – 明顯，因為有很多旅館是藏身在郊區。
• 運動與健身 – 可以實景呈現或動畫呈現路跑的路線。
• 電子商務與餐點外送 – 可以協助快遞員穿梭城市。

當然應還有其他例子，例如我們在GBKSOFT看它應用街景功能在專為金融交易員與財金顧問的App上，因此，我們也將我們這方面的經驗分享給你！我們將針對下列主題來做這次的教學：

1. Google Maps的整合；
2. 如何和Google Street View協作
3. 在需要的物件上設定相機的位置；
4. 測試Google Street View

本篇教學是以Swift語法為主，並在Xcode 9上測試

設定專案

我們將先建立有關Street View的專案，首先開啟Xcode，選擇Single View Application的範本，將專案名稱命名為Street View(或自行命名)。

接下來，使用CocoaPods來加入Google Maps的函式庫，先開啟終端機，將路徑設到本次專案的位置，輸入下列指令來初始pod:

cd <path-to-project>
pod init

作者提醒：如何你沒有使用CocoaPods的經驗，請參考另一篇文章CocoaPods 簡介 : 如何輕鬆管理 Swift / Objective-C 的類庫

接下來，在Podfile加入下列含有Google Maps的函式庫指令

target 'Street View' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for Street View
  pod 'GoogleMaps'
end

請確認你有先關掉Xcode的專案，然後回到終端機畫面和輸入下列指令安裝到pod內：

pod install

到此如果都進行得順利，你應該已經將Google Map嵌入到你的Xcode專案中，現在我們可以準備實現Google Street View到App內。現在開啟Street View.xcworkspace準備開始。

從Google取得API Key

現在，你需要取得一個API Key，這樣你才能與Google Maps的服務做溝通，首先，需要到https://console.developers.google.com，再這兒也建立一個新專案，我將它命名為StreetViewAppCoda，當然，你可以自行命名。

現在打開你所設定的新專案

然後在Google API Manager按下”Enable API”

接續，為了要使用Google Maps SDK，我們需要在Google登錄我們的應用，請到點選Library選項，然後選擇Google Maps for iOS。

再點選Enable來啟用API：

現在請到Credentials選項上，點選”Creat Credentials”，和選”API key”來建立你專屬的API key。

接著，進入到API key設定中，並點選Edit的icon。

在這兒你將需要將這個API key給予我們的專案用。所以你要選擇在key restriction選擇iOS app，並鍵入你專案app中的bundle ID(如：com.appcoda.Street-View)

然後點選Save，恭喜！完成了！你在可以從你的Demo app取得Google Maps服務，是時候回到Xcode，並加入些程式碼到我們的Demo app。

設定Google Street View

如果你剛有關掉Street View.xcworkspace，請重新開啟它，首先到AppDelegate.swift，這裡我們會先初始化Google Maps SDK，在檔案的起頭，首先import Google Maps函式庫：

import GoogleMaps

接者編輯下列這個方法，加入一行程式碼來設定API key:

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

    GMSServices.provideAPIKey("<your API key>")
    return true
}

現在，我們需要將把我們的Google Street View全景顯示在我們的螢幕上，先到Main.storyboard並加一個View到View Controller中，這個View會來用在顯示由Google Maps SDK所提供的Google Street View。為了讓它能佈滿螢幕，我們得再加上一些layout設定，如下圖所示：

為了能在view上啟用street view，請先點選它，然後到Identity inspector，改變它的class，從View換成GMSPanoramaView。

準備好後，最後一件事就是將它和程式碼連結，將畫面切換到Assistant editor，請點選View後，接著常按鍵盤上的Control拖拉到ViewController.swift，接著會跳出一個視窗，其中屬性請選擇outlet，並命名為panoramaView。

並且記得請在程式碼的開頭插入import GoogleMaps，否則你會遇到一些Error的訊息。

為了測試我們剛實現的Street View，並將下列的程式碼插入到viewDidLoad的方法，我們可讀取一個專屬的座標(也就是Apple’s Infinite Loop的座標)。

panoramaView.moveNearCoordinate(CLLocationCoordinate2D(latitude: 37.3317134, longitude: -122.0307466))

現在來開始執行這個專案，Demo App應會秀給你看到street view。

酷吧！但你或許想將相機轉個方向，面向特定的建築物或景點，你除了可以直用手動拖拉以外，你知道如何用程式碼來實現此功能嗎？我現在馬上來做給你看。

先回到ViewController的Class，先插入以下的程式碼：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 2) {
        self.panoramaView.animate(to: GMSPanoramaCamera(heading: 90, pitch: 0, zoom: 1), animationDuration: 2)
    }
}

GMSPanoramaCamera是GMSPanoramaView用來控制視角方向的，他需要三種參數來設定：

• heading – 相機的旋轉角度(相機鏡頭所看到的方位)[數值從0到360]
• pitch – 相機的俯視角度[數值從-90到90]
• zoom – 縮放圖片[數值到1到5]
• animationDuration – 這是一個選項值，有關於圖片轉動畫面的設定時間。

我使用下面的圖片來確認相機鏡頭所看到的heading方位

若一開始使用相機鏡頭所看到的方位為0的話，假如你想要將相機從街上轉向Apple Infinite Loop的方位，你需要以順時針方向轉90度來達成目的。

對於pitch的解釋，下面的圖解會該你更明白它的用意，所以這也是為何我們將它設為0。

現在你可以準備來個小測試了，在模擬器中，當app啟動後，View中的視角度將會改變。

事件掌控

當你讀取了街景資訊後，你可以採用GMSPanoramaViewDelegate這個協定來擷取當街景改變時的任何事觸發，有一個事件你需要注意掌控的就是Error Event，譬如Google Maps並沒有你所指定的特定座標呢？

為了能掌控Error Event，你須採用GMSPanoramaViewDelegate的協定並套用下列的方法來實現：

func panoramaView(_ view: GMSPanoramaView, error: Error, onMoveNearCoordinate coordinate: CLLocationCoordinate2D)

為了達到這個目的，我們使用extension來採用這個協定，插入下列的程式碼在ViewController.swift：

extension ViewController: GMSPanoramaViewDelegate {
    func panoramaView(_ view: GMSPanoramaView, error: Error, onMoveNearCoordinate coordinate: CLLocationCoordinate2D) {
        print(error.localizedDescription)
    }
}

現在在viewDidLoad()的方法中，將panoramaView的delegate設為self：

panoramaView.delegate = self

如果你將座標改成一個隨機的座標(e.g. 12.3, 98.2)，你將會得到主控台得到一個錯誤訊息：

The operation couldn’t be completed. (com.google.maps.GMSPanoramaService error 0.)

當然，在panorama view中還有其他的設定可以使用，你可以參考Google Maps SDK for iOS得到更詳盡的說明。

結論

每個行動裝置皆有獨立的Google Maps應用，所以將Street View直接放入到你的app，或許除了增加平均使用時間外與參與頻率，其實Google Street View還有其他挺酷的功能與方法，可以允許開發者開發更高端的使用，不僅是簡單的一張全景圖，例如：你可以將陀螺儀結合全景功能，所以使用者可以轉動手機來改變視角畫面。

如果你對本教學有任何問題，請留言在下方讓我知道。

本篇教學專案，你可以在這裡下載：full source code on GitHub