Google Maps 是一项非常强大和受欢迎的服务，它允许我们在网站或应用程序中显示地图和位置数据。借助 Angular，我们可以轻松地将 Google Maps 集成到我们的应用程序中。
在本文中，我们将介绍如何在 Angular 应用程序中实现 Google Maps 集成，包括如何：
- 使用 npm 安装
@agm/core包 - 配置 Google Maps API 密钥
- 在模块中导入
AgmCoreModule - 在组件中使用
<agm-map>元素
安装 @agm/core 包
要在 Angular 应用程序中使用 Google Maps，我们需要使用第三方库 @agm/core。我们可以使用 npm 包管理器来安装它：
--- ------- --------- ------
配置 Google Maps API 密钥
为了使用 Google Maps API，我们需要获取一个 API 密钥。我们可以访问 Google Cloud Platform 控制台，并使用我们的 Google 帐号登录，然后创建一个项目并获取一个 API 密钥。
要将 API 密钥配置到我们的 Angular 应用程序中，我们需要在 index.html 文件中添加以下代码：
------- ------------------------------------------------------------------------
请将 YOUR_API_KEY 替换为您的实际 API 密钥。
导入 AgmCoreModule
在我们的 Angular 应用程序中导入 AgmCoreModule，以便我们可以在组件中使用 Google Maps。要导入该模块，请在 app.module.ts 文件中添加以下代码：
------ - ------------- - ---- ------------
-----------
-- ---
-------- -
-- ---
-----------------------
------- --------------
--
--
-- ---
--
------ ----- --------- - -请替换 YOUR_API_KEY 为您的实际 API 密钥。
使用 <agm-map> 元素
使用 <agm-map> 元素，在我们的 Angular 应用程序中显示 Google Maps。
-------- ---------------- ----------------------------
上面的代码将在页面上显示一个 Google 地图。我们可以使用 latitude 和 longitude 属性来设置地图的中心坐标。
以下是完整的示例组件代码：
------ - --------- - ---- ----------------
------------
--------- -
-------- ---------------- ----------------------------
--
------- --
------- -
------- ------
-
--
--
------ ----- ---------------- -
--- - ----------
--- - ---------
-在这个例子中，我们将地图的中心坐标设置为 lat 和 lng 变量的值。
要运行此示例，我们需要在 app.module.ts 文件中将 ExampleComponent 添加到 declarations 数组中，并在 app-routing.module.ts 文件中设置路由。
结论
在本文中，我们介绍了如何在 Angular 应用程序中实现 Google Maps 集成。我们使用 @agm/core 包来实现这一目标，并在模块中配置了 Google Maps API 密钥。我们还介绍了如何在组件中使用 <agm-map> 元素，以在我们的应用程序中显示地图。
此外，我们还提供了一个简单的示例，以帮助您更好地了解如何在自己的应用程序中实现 Google Maps 集成。希望这篇文章能够帮助您学习如何将 Google Maps 集成到您的 Angular 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67021ce0d91dce0dc8468686