安装 AGM 控件到 Angular 8 项目中

AGM，全称 Angular Google Maps，是一款适用于 Angular 框架的 Google 地图控件。如果你正在开发一个需要使用地图的 Angular 8 应用程序，那么 AGM 控件绝对值得一试。

下面是安装 AGM 控件到 Angular 8 项目的步骤：

1. 安装 AGM 控件

为了在 Angular 8 项目中使用 AGM 控件，需要先通过 npm 安装它。在控制台中导航到你的项目根目录，然后输入以下命令：

npm install @agm/core

这会在你的项目中安装 AGM 控件及其依赖项。

2. 导入 AGM 模块

在使用 AGM 控件之前，需要先将其导入到你的 Angular 8 应用程序中。在 app.module.ts 文件中，编辑 import 块，添加以下代码：

import { AgmCoreModule } from '@agm/core';

// ...

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_API_KEY'
    }),
    // ...
  ],
  // ...
})

AgmCoreModule.forRoot() 方法接受一个 JSON 对象参数，其中 apiKey 项应设置为你的 Google Maps API 密钥。如果你还没有密钥，请先通过 Google Cloud Platform 获取一个。

3. 在组件中使用 AGM 控件

现在，已经可以在你的 Angular 8 组件中使用 AGM 控件了。在你需要使用地图的组件中，添加以下 HTML 元素：

<agm-map [latitude]="51.678418" [longitude]="7.809007" [zoom]="14">
  <agm-marker [latitude]="51.678418" [longitude]="7.809007"></agm-marker>
</agm-map>

这将创建一个带有一个标记的地图。注意，latitude、longitude 和 zoom 属性可以设置为你需要的值。

4. 运行 Angular 8 应用程序

最后，运行你的 Angular 8 应用程序，以查看 AGM 控件的效果。在控制台中输入以下命令：

ng serve

这将在本地服务器上运行你的应用程序。在浏览器中导航到 http://localhost:4200，应该能看到一个包含地图和标记的页面。

现在，你已经成功地将 AGM 控件添加到了你的 Angular 8 应用程序中！