iOS App 程式開發

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

Google Map SDK 實作:如何把Google街景嵌入到你的 iOS App
Google Map SDK 實作:如何把Google街景嵌入到你的 iOS App
In: 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(或自行命名)。

create_project

接下來,使用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,當然,你可以自行命名。

new_project_in_google_apis

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

select_created_project

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

enable_api

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

enable-google-maps

再點選Enable來啟用API:

enable-google-maps-api

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

create_credentials_api_key

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

edit-api-key

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

setup-bundle-id-google

然後點選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設定,如下圖所示:

add-view-layout-constraint

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

gmspanoramaview

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

outlet-panorama

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

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

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

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

apple-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)
    }
}

GMSPanoramaCameraGMSPanoramaView用來控制視角方向的,他需要三種參數來設定:

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

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

campus-compass

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

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

camera

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

street-view-demo

事件掌控

當你讀取了街景資訊後,你可以採用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

本篇教學作者為Andrew Zakhliupanyi,目前任職在GBKSOFT的擔任iOS開發工程師,Andre熱愛開發具有特色的Apps。
Credit: Photo by Hans M on Unsplash.
譯者簡介:Oliver Chen-工程師,喜歡美麗的事物,所以也愛上Apple,目前在iOS程式設計上仍是新手,正研讀Swift與Sketch中。生活另一個身份是兩個孩子的爸,喜歡和孩子一起玩樂高,幻想著某天自己開發的App,可以讓孩子覺得老爸好棒!。聯絡方式:電郵[email protected]

原文How to Integrate Google Street View in iOS Apps

作者
AppCoda 編輯團隊
此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。
評論
更多來自 AppCoda 中文版
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。