向应用添加 3D 地图

请选择平台: Android iOS JavaScript

西雅图、旧金山和巴黎的基本地图

此页面通过一个示例介绍了如何使用 Maps 3D SDK for iOS 向 iOS 应用添加基本 3D 地图。本页面中的说明假定您已完成设置页面中的步骤,并且已具备以下条件:

  • 已启用 Maps 3D SDK for iOS 的 Google Cloud 项目
  • 适用于 Maps 3D SDK for iOS 的 API 密钥
  • 添加了 Maps 3D SDK for iOS 软件包的 Xcode 16.0 版或更高版本。

如需详细了解这些前提条件,请参阅设置

按照更高级的 Codelab 操作

在 GitHub 上查看更多代码示例

第 1 部分:创建基本的 SwiftUI 应用

  1. 在 Xcode 中创建一个新应用。
  2. 将你的 产品名称 设置为 Hello3DWorld,组织标识符设置为 com.example。包名应为 com.example.Hello3DWorld
  3. 选择 SwiftUI 界面。
  4. 将 Maps 3D 库添加到您的应用中。请参阅设置部分中的说明

第二部分:添加地图

地球的极简三维地图

  1. 打开名为ContentView.swift的文件。这是您应用的入口点和主要导航。

  2. 导入 SwiftUIGoogleMaps3D 包。

  3. 将 body 声明内的所有代码替换为 Map(mode: .hybrid)。

    初始化 Map 所需的最小初始配置是 MapMode

    • .hybrid,或
    • 。卫星

    您的 ContentView.swift 文件应如下所示:

    import SwiftUI
    import GoogleMaps3D
    
    struct ContentView: View {
      var body: some View {
        Map(mode: .hybrid)
      }
    }
    
    #Preview {
      ContentView()
    }
    

第 3 部分:设置 API 密钥。

  1. 必须在 Map 初始化之前设置 API 密钥。通过在包含 Map 的 Viewinit() 事件处理程序中设置 Map.apiKey 来实现。

    import SwiftUI
    import GoogleMaps3D
    
    struct ContentView: View {
      init () {
        Map.apiKey = "YOUR_API_KEY"
      }
    
      var body: some View {
        Map(mode: .hybrid)
      }
    }
    

第四部分:使用摄像头控制地图视图

3D 地图视图由 Camera 类控制。在此步骤中,您将学习如何指定位置、海拔、航向、倾斜度、横滚和范围,以自定义地图视图。

  1. Map() 函数调用更改为包含 initialCamera 属性。 初始化 initialCamera 以显示曼哈顿市中心的景色。

    import SwiftUI
    import GoogleMaps3D
    
    struct ContentView: View {
      init () {
        Map.apiKey = "YOUR_API_KEY"
      }
      var body: some View {
        Map(initialCamera: .init(
          latitude: 40.748339,
          longitude: -73.985912,
          altitude: 211.1,
          heading: 52,
          tilt: 68,
          range: 1039
        ), mode: .hybrid)
      }
    }
    

上述代码为以下参数设置了值:

  • heading:从正北方向到相机所指方向的方位角(以度为单位)。
  • tilt:倾斜角度(以度为单位),其中 0 表示正上方,90 表示水平方向。
  • roll: 相机绕垂直平面的滚动角度,以度为单位。
  • range: 相机与经纬度位置的距离(以米为单位)
  • altitude:相机高于海平面的高度。

如果您未提供任何这些额外的参数,系统将使用默认值。

为了让相机视图显示更多 3D 数据,请将初始参数设置为显示更近、倾斜的视图。

第六部分:预览并运行您的应用

纽约市基本三维地图

  1. 添加 Xcode 预览

    预览是 Xcode 的一项强大功能,它允许您在无需使用模拟器或外部设备的情况下查看和操作您的应用程序。

    要添加预览,请在结构体外部添加 #Preview {} 代码块。

    #Preview {
      CameraDemo()
    }
    
  2. 运行应用

构建并运行应用。

恭喜!

您已成功向应用程序中添加了 3D 地图!

接下来,您可以探索 iOS 版 Maps 3D SDK 的更多高级功能,例如 相机路径动画3D 标记多边形