加入含有標記的地圖

本教學課程說明如何在 iOS 應用程式中加入 Google 地圖。地圖中包含一個標記 (也稱為圖釘),用以表示特定位置。

取得程式碼

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

設定開發專案

請按照下列步驟安裝 Maps SDK for iOS:

  1. 下載並安裝 Xcode 14.0 版
  2. 如果您還沒有 CocoaPods,請在終端機中執行下列指令,以便在 macOS 上安裝:
    sudo gem install cocoapods
  3. 複製或下載 Google 地圖 iOS 範例存放區
  4. 前往 tutorials/map-with-marker 目錄。
  5. 執行 pod install 指令。這項操作會安裝 Podfile 中指定的 API 及其所有依附元件。
  6. 執行 pod outdated 即可比較已安裝的 Pod 版本與任何更新。如果偵測到新版本,請執行 pod update 來更新 Podfile 並安裝最新的 SDK。詳情請參閱 CocoaPods 指南
  7. 按兩下專案的 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」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. 建立地圖,並將其設為 loadView() 的檢視畫面。

    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. loadView() 的地圖中加入標記。

    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

後續步驟

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