简介
@reginbald/agm-core 是一个使用 TypeScript 编写的 Angular 地图插件库，它提供了高度可定制的地图组件，同时支持各种地图服务提供商。
在本教程中，我们将介绍如何使用 @reginbald/agm-core 来创建一个基本的 Angular 应用程序，并使用地图服务在页面中显示地图。
前置技能
- Angular 基础知识
- TypeScript 基础知识
- 前端基础知识
安装
你可以使用 npm 包管理器来安装 @reginbald/agm-core。
npm install @reginbald/agm-core
使用
引入模块
在应用程序中引入 @reginbald/agm-core 模块。打开 app.module.ts 文件，添加以下行：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------
-----------
-------- -
-----------------------
------- ----------
--
-
--
------ ----- --------- - -添加组件
创建一个组件，用于显示地图。在 app.component.html 文件中添加以下行：
<agm-map [latitude]="51.678418" [longitude]="7.809007" [zoom]="10"></agm-map>
其中 latitude 和 longitude 分别表示地图的中心点的纬度和经度。zoom 表示地图的缩放级别。我们可以根据自己的需求自由的调整这些值。
配置 API Key
在 module 引入模块中已经完成了 API 密钥的添加。我们只需要替换掉 YOUR_KEY 即可，这里需要注意的是你需要自己去申请 API_KEY。
添加地图服务提供商
默认情况下，@reginbald/agm-core 支持 Google Maps，但它也支持其他提供商，如 Bing Maps、MapQuest 和 OpenStreetMap。
我们需要在 app.module.ts 文件的 providers 数组中添加相应的提供商。例如，如果我们希望使用 Bing Maps，添加以下行：
import { BingMapService } from '@reginbald/agm-core';-- -------------------- ---- -------
-----------
-------- -
-----------------------
------- ----------
--
--
---------- ----------------
--
------ ----- --------- - -添加样式
为了使地图和控件具有视觉吸引力，可以添加一些样式。
在 app.component.scss 文件中添加以下行：
.agm-map-container {
height: 500px; // 定义地图容器的高度。
}示例代码
我们可以参考以下代码来创建一个基本的地图应用程序：
<!-- app.component.html --> <agm-map [latitude]="51.678418" [longitude]="7.809007" [zoom]="10"></agm-map>
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------
------ - -------------- - ---- ----------------------
-----------
-------- -
-----------------------
------- ----------
--
--
---------- ----------------
--
------ ----- --------- - -// app.component.scss
.agm-map-container {
height: 500px;
}结论
在本教程中，我们介绍了如何使用 @reginbald/agm-core 来创建一个基本的 Angular 地图应用程序，并通过示例代码演示了如何使用地图服务来显示地图。当然，@reginbald/agm-core 还有更多高级功能和可定制化选项，你可以在官方文档中找到它们。此外，我们还介绍了如何使用 Bing Maps 作为地图提供商，如果你想使用其他提供商，只需要更改提供商即可。
当然，学习地图不只是这一篇文章的内容，大家需要在实践上进行体现。祝大家学习愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd3ba