新增含有標記的地圖

本教學課程說明如何在 iOS 應用程式中加入含有標記的簡易 Google 地圖。適用對象為具備 Swift 或 Objective-C 初學者或中級知識的使用者,以及對 Xcode 的一般知識。如需建立地圖的進階指南,請參閱開發人員指南。

在本教學課程中,您將建立下列地圖。標記位在澳洲雪梨。

螢幕截圖顯示有標記在雪梨上方的地圖

取得程式碼

複製或下載 GitHub 上的 Google 地圖 iOS 範例存放區

或者,您也可以按一下下列按鈕下載原始碼:

提供程式碼

Swift

/*
 * Copyright 2020 Google Inc. All rights reserved.
 *
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

import UIKit
import GoogleMaps

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
        let mapView = GMSMapView.map(withFrame: self.view.frame, camera: camera)
        self.view.addSubview(mapView)

        // Creates a marker in the center of the map.
        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
  }
}

      

Objective-C

/*
* Copyright 2020 Google Inc. All rights reserved.
*
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/

#import "ViewController.h"
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
  // Do any additional setup after loading the view.
  // Create a GMSCameraPosition that tells the map to display the
  // coordinate -33.86,151.20 at zoom level 6.
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:6];
  GMSMapView *mapView = [GMSMapView mapWithFrame:self.view.frame camera:camera];
  mapView.myLocationEnabled = YES;
  [self.view addSubview:mapView];

  // Creates a marker in the center of the map.
  GMSMarker *marker = [[GMSMarker alloc] init];
  marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
  marker.title = @"Sydney";
  marker.snippet = @"Australia";
  marker.map = mapView;
}

@end

      

開始使用

Swift 套件管理員

Maps SDK for iOS 可使用 Swift Package Manager 安裝。

  1. 確認您已移除所有現有的 Maps SDK for iOS 依附元件。
  2. 開啟終端機視窗,然後前往 tutorials/mapwithmarker 目錄。
  3. 確認 Xcode 工作區已關閉,然後執行下列指令:
    sudo gem install cocoapods-deintegrate cocoapods-clean
    pod deintegrate
    pod cache clean --all
    rm Podfile
    rm map-with-marker.xcworkspace
  4. 開啟 Xcode 專案並刪除 podfile。
  5. 依序前往「File」>「Add Package Dependencies」
  6. 在網址欄位中輸入 https://github.com/googlemaps/ios-maps-sdk,按下 Enter 鍵擷取套件,然後按一下「新增套件」
  7. 您可能需要依序點選「File」>「Packages」>「Reset Package Cache」,重設套件快取。

使用 CocoaPods

  1. 下載並安裝 Xcode 14.0 以上版本。
  2. 如果您尚未安裝 CocoaPods,請在終端機中執行下列指令,以在 macOS 上安裝這個 Pod:
    sudo gem install cocoapods
  3. 前往 tutorials/map-with-marker 目錄。
  4. 執行 pod install 指令。此操作會安裝 Podfile 中指定的 Maps SDK 以及所有依附元件。
  5. 執行 pod outdated,比較已安裝的 Pod 版本與任何更新項目。如果偵測到新版本,請執行 pod update 以更新 Podfile 並安裝最新版 SDK。詳情請參閱 CocoaPods 指南
  6. 開啟 (按兩下) 專案的 map-with-marker.xcworkspace 檔案,在 Xcode 中開啟。您必須使用 .xcworkspace 檔案來開啟專案。

取得 API 金鑰並啟用必要的 API

如想完成本教學課程,請取得獲授權使用 Maps SDK for iOS 的 Google API 金鑰。點選下方按鈕即可取得金鑰並啟用 API。

開始使用

詳情請參閱「取得 API 金鑰」。

Add the API key to your application

將 API 金鑰新增到您的 AppDelegate.swift 中,如下所示:

  1. 請注意,下列匯入陳述式已新增至檔案:
    import GoogleMaps
  2. application(_:didFinishLaunchingWithOptions:) 方法中編輯下列程式碼,將 YOUR_API_KEY 替換成您的 API 金鑰:
    GMSServices.provideAPIKey("YOUR_API_KEY")

建構並執行應用程式

  1. 將 iOS 裝置連接至電腦,或從 Xcode 配置選單中選取模擬器
  2. 如果您使用裝置,請確認已啟用定位服務。 如果使用模擬器,請從「Features」(功能) 選單中選取所需位置。
  3. 在 Xcode 中,按一下「Product/Run」選單選項 (或播放按鈕圖示),
    • Xcode 會建構應用程式,然後在裝置或模擬器上執行應用程式。
    • 您應該會看到以澳洲東海岸的雪梨為中心的地圖,上面有一個標記,與本頁中的圖片類似。

疑難排解:

  • 如未看到地圖,請檢查您是否已按照上述步驟取得 API 金鑰,並加入應用程式。查看 Xcode 的偵錯控制台,查看是否有關於 API 金鑰的錯誤訊息。
  • 如果您已依據 iOS 軟體包 ID 限制 API 金鑰,請編輯金鑰,加入應用程式的軟體包 ID:com.google.examples.map-with-marker
  • 確認您的 Wi-Fi 或 GPS 連線品質良好。
  • 使用 Xcode 偵錯工具查看記錄檔並為應用程式偵錯。

瞭解程式碼

  1. 建立地圖,並將其設為 viewDidLoad() 中的檢視畫面。

    Swift

    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
    view = mapView
          

    Objective-C

    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                            longitude:151.20
                                                                 zoom:6.0];
    GMSMapView *mapView = [[GMSMapView alloc] initWithFrame: CGRectZero camera:camera];
    self.view = mapView;
          
  2. viewDidLoad() 的地圖中加入標記。

    Swift

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
    marker.title = "Sydney"
    marker.snippet = "Australia"
    marker.map = mapView
          

    Objective-C

    // Creates a marker in the center of the map.
    GMSMarker *marker = [[GMSMarker alloc] init];
    marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
    marker.title = @"Sydney";
    marker.snippet = @"Australia";
    marker.map = mapView;
          

根據預設,Maps SDK for iOS 會在使用者輕觸標記時顯示資訊視窗的內容。如果您可以接受使用預設行為,就不需要為標記新增點擊事件監聽器。

恭喜!您已經建構了一個能顯示 Google 地圖,且有標記指出特定位置的 iOS 應用程式。此外,您也已經學會如何使用 Maps SDK for iOS

後續步驟

進一步瞭解地圖物件以及標記的用途。