Google Developers Codelab 提供了一种引导式编码实践教程体验。大部分 Codelab 会逐步介绍开发小应用或在现有应用中新增功能的过程。这些 Codelab 涵盖各种主题,例如 Android Wear、Google Compute Engine、ARCore 和 iOS 上的 Google API。
GitHub 上的 Codelab 工具使用 Firebase AppCheck 和 reCAPTCHA 验证 Places API 请求
41 分钟
Updated 2024年12月21日
在此 Codelab 中,您将了解如何在向 Places API 发出请求之前,使用 Firebase AppCheck 和 reCAPTCHA 验证 Web 应用
将地图添加到您的 Android 应用 (Kotlin)
Updated 2022年5月9日
此 Codelab 介绍了如何通过构建一个可显示美国加利福尼亚州旧金山市自行车商店地图的应用,将 Maps SDK for Android 与您的应用集成以及使用其核心功能。 对于以下启用步骤,您需要启用 Maps SDK for Android 。 如果您还没有已启用结算功能的 Google Cloud Platform 帐号和项目,请参阅 Google Maps Platform 使用入门 指南,创建结算帐号和项目。 为帮助您尽快入门,我们在下面提供了一些起始代码,帮助您顺利完成此
Places SDK for Android 使用入门 (Kotlin)
Updated 2022年5月9日
此 Codelab 会教您如何将 Places SDK for Android 与您的应用集成并使用 Places SDK 的各项功能。 若要完成此 Codelab,您需要以下帐号、服务和工具: 若要完成下面的启用步骤,请启用 Places API 。 如果您还没有已启用结算功能的 Google Cloud Platform 帐号和项目,请参阅 Google Maps Platform 使用入门 指南,创建结算帐号和项目。 为了让您能尽快上手,请下载起始代码,以便顺利完成此
将地图添加到您的 iOS 应用 (Swift)
Updated 2022年5月9日
此 Codelab 会教您如何开始使用 Google Maps Platform 通过 Swift 构建 iOS 应用。您将构建一个 iOS 应用,用于执行以下操作: 若要完成此 Codelab,您需要以下帐号、服务和工具: 若要完成下面的启用步骤,您需要启用 Maps SDK for iOS 。 如果您还没有已启用结算功能的 Google Cloud Platform 帐号和项目,请参阅 Google Maps Platform 使用入门 指南,创建结算帐号和项目。
向网站添加地图 (JavaScript)
Updated 2022年5月7日
在此 Codelab 中,您将学习在 Web 平台上开始使用 Google Maps Platform 需知的内容。您将学习所有基础知识,从准备工作到加载 Maps JavaScript API、显示您的第一个地图、使用标记和标记聚类、在地图上绘图,以及处理用户互动等,面面俱到。 在此 Codelab 中,您将构建 Web 应用,用于执行以下操作: 您必须熟悉以下各项内容,才能完成此 Codelab。如果您已经能够熟练使用 Google Maps Platform,请直接跳到该 Codelab!
向 iOS 应用添加地图 (Objective-C)
Updated 2022年5月7日
在此 Codelab 中,您将学习开始使用 Google Maps Platform 通过 Objective-C 构建 iOS 应用需知的内容。您将学习所有基础知识,从准备工作到加载 Maps SDK for iOS、显示您的第一个地图、使用标记和标记聚类、在地图上绘图,以及处理用户互动等,面面俱到。 在此 Codelab 中,您将构建 iOS 应用,用于执行以下操作: 您必须熟悉以下各项内容,才能完成此 Codelab。如果您已经能够熟练使用 Google Maps
在 Android 上以 AR 模式显示附近的地点 (Kotlin)
Updated 2022年5月7日
此 Codelab 会教您如何使用 Google Maps Platform 中的数据在 Android 上以增强现实 (AR) 模式显示附近的地点。 此 Codelab 使用 Android 10.0(API 级别 29),并且需要您在 Android Studio 中安装 Google Play 服务。要安装这两个依赖项,请完成以下步骤: 在下一节中的第 3 步,为此 Codelab 启用 Maps SDK for Android 和 Places API 。 如果您之前从未使用过
使用 WebGL 叠加视图打造 3D 地图体验
Updated 2022年5月6日
此 Codelab 会教您如何使用由 WebGL 提供支持的 Maps JavaScript API 功能控制三维矢量地图并在地图上渲染对象。 此 Codelab 假定您熟悉 JavaScript 和 Maps JavaScript API 方面的知识。如需了解使用 Maps JS API 的基础知识,不妨试着学习 向网站添加地图 (JavaScript) Codelab 。 若要完成下面的启用步骤,您需要启用 Maps JavaScript API 。 如果您还没有已启用结算功能的
将 Google 地图添加到 Flutter 应用
Updated 2022年5月2日
在此 Codelab 中,您将使用 Flutter 移动应用 SDK 打造 Google 地图体验,从而在 iOS 和 Android 上打造优质的原生体验。
针对 Android (Java) 构建您自己的当前地点选择器
Updated 2022年4月29日
了解如何使用 Google Maps Platform 的 Maps SDK for Android 和 Places SDK for Android 向用户呈现用于确定他们位置的可能地点列表。
使用 Google Maps Platform 和 Google Cloud 构建全栈店铺定位工具
Updated 2022年4月28日
假设您要在地图上展示多个地点,并且希望用户可以看到这些地点的位置并确定他们想要访问的地点。这种情况的常见示例包括: 在此 Codelab 中,您将创建一个定位工具,该定位工具会根据特殊位置的实时数据 Feed 进行绘制,帮助用户找到距离他们的出发地最近的位置。这种全栈定位工具能够处理的地点远远多于 简单的店铺定位工具 ,后者最多只能处理 25 个店铺位置。 此 Codelab 使用开放数据集模拟与大量店铺位置相关的预填充元数据,以便您可以集中精力学习关键的技术概念。 在下文的第 3 步中,为此
使用 Google Maps Platform 和 deck.gl 将数据可视化
Updated 2022年4月27日
此 Codelab 会教您如何使用 Maps JavaScript API 和 deck.gl(一个采用 WebGL 加速技术的开源数据可视化框架)将大量地理空间数据可视化。 如果您之前从未使用过 Google Maps Platform,请按照以下步骤操作: 如果您还没有 Node.js,请转到 https://nodejs.org/ ,然后在计算机上下载并安装 Node.js 运行时。 Node.js 包括 npm,您需要此软件包管理器才能为此 Codelab 安装依赖项。
使用 SwiftUI (Swift) 将地图添加到您的 iOS 应用
Updated 2022年4月26日
此 Codelab 会教您如何将 Maps SDK for iOS 与 SwiftUI 搭配使用。 为了完成以下启用步骤,请启用 Maps SDK for iOS 。 如果您还没有已启用结算功能的 Google Cloud Platform 帐号和项目,请参阅 Google Maps Platform 使用入门 指南,创建结算帐号和项目。 为帮助您尽快入门,我们在下面提供了一些起始代码,帮助您顺利完成此 Codelab。您可以跳到解决方案部分,但如果您想要按照所有步骤自行构建,请继续阅读。
使用 Google Maps Platform (JavaScript) 构建简单的店铺定位工具
Updated 2022年4月24日
网站最常用的功能之一是通过 Google 地图 突出显示有实体经营场所的商家、机构或其他实体的一个或多个地点。地图的实现方式可能会因各种要求(如地点数量及其更改频率)的不同而千差万别。 在此 Codelab 中,您看到的将是最简单的用例,其中只有几个地点且几乎不会更改,例如一个适用于连锁店商家的店铺定位工具。在这种情况下,您可以使用技术含量相对较低的无需任何服务器端编程的方法。但这并不是说您不能发挥创意,相反,您可利用 GeoJSON
Create Your First 3D Map
40 分钟
Updated 2025年2月21日
This codelab is intended to help you understand how to create your first 3D Map using Photorealistic 3D Maps in Maps JavaScript. You will learn the basics about loading the right components of the Maps Javascript API, displaying your first 3D Map and
Add markers and animation to a 3D Map
1 小时 37 分钟
Updated 2025年2月20日
This tutorial explores how to add and style 3D markers in your application. You'll also learn how to animate your application by flying to and around specific locations. This tutorial builds on the concepts covered in the first codelab. If you