前言
在前端开发中，地图组件是一种常见的需求。但是，每次重复地开发地图组件显然是不明智的。因此，本文将介绍如何使用 Angular 2 制作可复用的地图组件。
前置知识
在阅读本文之前，你需要对 Angular 2 有一定的了解，并且需要掌握以下技能：
- TypeScript
- HTML
- CSS
- 基本的 Angular 2 概念
步骤
1. 安装依赖
首先，我们需要安装一些依赖。在项目根目录下执行以下命令：
npm install @agm/core --save
这个命令会将 Angular Google Maps （AGM）库安装到我们的项目中。
2. 创建地图组件
在 Angular 2 中，我们可以通过 ng generate component 命令来创建组件。在项目根目录下执行以下命令：
ng generate component map
这个命令将在 src/app 目录下创建一个名为 map 的组件，并且在 app.module.ts 中自动将其注册。
3. 初始化地图设置
在 map.component.ts 中，我们需要初始化地图设置。我们可以使用 AGM 库提供的 AgmMap 指令来初始化地图。在 map.component.ts 中，添加以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ---------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ---- - -- --- - ---------- --- - --------- -
在上面的代码中，我们定义了 zoom、lat 和 lng 三个变量，分别表示地图的缩放级别、纬度和经度。这些变量将在 AgmMap 指令中使用。
4. 在模板中添加地图
在 map.component.html 中，我们可以使用 AgmMap 指令来添加地图。添加以下代码：
<agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng"></agm-map>
在上面的代码中，我们使用了 AgmMap 指令，并且通过 zoom、lat 和 lng 变量来设置地图的缩放级别、纬度和经度。
5. 测试地图组件
现在，我们已经完成了地图组件的制作。我们可以在 app.component.html 中使用 <app-map></app-map> 来添加地图组件。添加以下代码：
<app-map></app-map>
现在，我们可以通过 ng serve 命令在浏览器中查看地图组件是否正常工作。
示例代码
以下是完整的示例代码：
-- -------------------- ---- ------- -- ---------------- ------ - --------- - ---- ---------------- ------------ --------- ---------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ---- - -- --- - ---------- --- - --------- -
<!-- map.component.html --> <agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng"></agm-map>
<!-- app.component.html --> <app-map></app-map>
结论
在本文中，我们已经成功地使用 Angular 2 制作了一个可复用的地图组件。这个组件可以在任何项目中使用，并且可以通过修改初始化设置来满足不同的需求。希望本文能够为你带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675404111b963fe9cc4b909d