加入含有標記的地圖

本教學課程說明如何在 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 套件管理工具

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

  1. 確認您已移除所有現有的 Maps SDK for iOS 依附元件。
  2. 開啟終端機視窗,然後前往 tutorials/map-with-marker 目錄。
  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. 前往「檔案」>新增套件依附元件
  6. 輸入 https://github.com/googlemaps/ios-maps-sdk 做為網址,按下 Enter 來提取套件,然後按一下「新增套件」
  7. 您可能需要使用 [檔案] > [檔案] 來重設套件快取套裝行程 >重設套件快取

使用 CocoaPods

  1. 下載並安裝 Xcode 15.0 以上版本。
  2. 如果您尚未安裝 CocoaPods, 從終端機執行下列指令,以便在 macOS 上安裝:
    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

如想完成本教學課程,請取得可授予此角色的 Google API 金鑰 請使用 Maps SDK for iOS。點選下方按鈕即可取得 金鑰並啟用 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」(地圖項目) 中選取位置 或前往 Google 試算表選單
  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 地圖,且 標記來指出特定位置。此外,您也已經學會如何使用 Maps SDK for iOS

後續步驟

進一步瞭解地圖物件以及用途 「標記」都能帶來更大成效