添加地图

请选择平台: Android iOS JavaScript

在 API 中,地图是以 GMSMapView 类(UIView 的 子类)表示的。地图是 Maps SDK for iOS 中最重要的对象,提供了添加、移除和管理其他对象(例如标记和多段线)的必要方法。

简介

借助 Maps SDK for iOS,您可以在 iOS 应用中显示 Google 地图。这些地图的外观与您在 Google 地图 iOS 应用中看到的地图相同,并且该 SDK 公开了许多相同的功能。

除了地图功能之外,该 API 还支持一系列与 iOS 界面模型一致的互动。例如,您可以通过定义对用户手势(例如点按和双击)做出响应的响应器来设置与地图的互动。

使用 Map 对象时的关键类是 GMSMapView 类。 GMSMapView 会自动处理以下操作:

  • 连接到 Google 地图服务。
  • 下载地图图块。
  • 在设备屏幕上显示图块。
  • 显示各种控件,例如平移和缩放控件。
  • 通过移动和缩放地图响应平移和缩放手势。
    • 通过倾斜地图的视角响应双指手势。

除了这些自动操作之外,您还可以通过 GMSMapView 类公开的属性和方法来控制地图的行为和外观。使用 GMSMapView 添加和移除标记、地面 叠加层和多段线,更改显示的地图类型,并通过 GMSCameraPosition 类控制地图上显示的内容。

使用 SwiftUI 构建地图

SwiftUI 提供了一种使用声明式方法创建界面的额外方式。您只需告诉 SwiftUI 您希望视图如何随着其所有不同的状态而变化,系统将完成其余工作。每当底层状态因事件或用户操作而变化时,SwiftUI 都会更新视图。

Maps SDK for iOS 是在 UIKit 的基础上构建的,不提供与 SwiftUI 兼容的视图。如需在 SwiftUI 中添加地图,必须符合 UIViewRepresentable 或 UIViewControllerRepresentable。如需了解详情,请参阅 Codelab:使用 SwiftUI将地图添加到您的 iOS 应用。

添加地图

添加地图的基本步骤如下:

  1. 如需获取 SDK 和 API 密钥并添加所需的框架,请按以下文档中的步骤操作:

    1. 在 Google Cloud 控制台中进行设置

    2. 使用 API 密钥

    3. 设置 Xcode 项目

    4. 在 AppDelegate 中,向 GMSServices 上的 provideAPIKey: 类方法提供您的 API 密钥。

    5. 创建或更新 ViewController。如果此视图控制器变为可见状态时显示地图,请务必在 viewDidLoad 方法中创建该地图。

    6. 初始化地图视图时,使用 GMSMapViewOptions 设置配置选项。属性包括 frame、camera、mapID、backgroundColor 或 screen。

    7. 使用 地图选项 camera 属性设置 GMSCameraPosition 对象。这会指定地图的中心位置和缩放级别。

    8. 使用 GMSMapView options: 方法创建并实例化 GMSMapView 类。如果此地图将用作视图控制器的唯一视图,则地图选项 frame 的默认值 CGRectZero 可用作视图 frame,地图会自动调整大小。

    9. 将 GMSMapView 对象设置为视图控制器的视图。例如,self.view = mapView;。

下面的示例向某个应用添加了一个以新加坡市区为中心的地图。

Swift

import GoogleMaps

class MapObjects : UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    let options = GMSMapViewOptions()
    options.camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    options.frame = self.view.bounds;

    let mapView = GMSMapView(options:options)
    self.view = mapView
  }
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                        longitude:103.848
                                                             zoom:12];
  options.frame = self.view.bounds;

  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  self.view = mapView;
}

完成这些步骤后,您可以进一步配置 GMSMapView 对象。

后续步骤

完成上述步骤后,就可以配置地图 设置了。