引言
Google 地图 API 是目前用较广的地图 API 之一，使用它可以为我们的应用添加地图支持。在 Angular 应用中，我们可以利用 Angular 的一些特性来更方便地集成 Google 地图 API。本文将介绍如何在 Angular 应用中使用 Google 地图 API。
步骤
步骤一：获取 API key
首先，我们需要到 Google Cloud Console 中为我们的应用获取一个 API key。具体步骤如下：
- 打开 Google Cloud Console：https://console.cloud.google.com/
- 点击“创建项目”，输入项目名称，点击“创建”
- 在左侧导航栏中点击“API 和服务” -> “凭据”
- 点击“创建凭据” -> “API 密钥” -> “创建”
- 将生成的 API key 复制保存，稍后会用到
步骤二：安装 Google 地图 API
在 Angular 应用中使用 Google 地图 API 需要安装 @agm/core 库，因此我们需要在终端中执行以下命令安装 @agm/core：
npm install @agm/core --save
步骤三：在 app.module.ts 中引入 @agm/core
一般情况下，我们会在 app.module.ts 文件中引入 @agm/core 模块，并将 API key 注册进 @agm/core 模块中。具体步骤如下：
- 在 app.module.ts 文件中添加如下代码：
-- -------------------- ---- -------
------ - ------------- - ---- ------------
---
-----------
---
-------- -
----
-----------------------
------- --------------
--
--
---
--- 将
YOUR_API_KEY替换为我们在步骤一中获取的 API key。
步骤四：使用 Google 地图 API
现在，我们已经可以在我们的 Angular 应用中使用 Google 地图 API 了。下面是一个简单的例子：
- 在组件文件中添加如下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --- -- ------ ----- ------------ - ----- - ------ --- - ---------- --- - --------- -
- 在组件的 HTML 文件中添加如下代码：
<agm-map [latitude]="lat" [longitude]="lng"> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> </agm-map>
- 运行应用，查看效果。
以上示例中，我们通过组件类中的 lat 和 lng 变量来设置地图的初始位置，然后在模板中使用 agm-map 和 agm-marker 组件来渲染地图。
结论
本文介绍了如何在 Angular 应用中使用 Google 地图 API。我们需要先在 Google Cloud Console 中获取 API key，然后在 app.module.ts 中注册 @agm/core 模块，并将 API key 传递给模块。最后，我们可以在组件中使用 agm-map 和 agm-marker 组件来渲染地图。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67304522eedcc8a97c917ca7