前置知识
在学习本教程之前，你需要掌握基本的 HTML、CSS 和 JavaScript 知识，以及 Angular 框架的使用经验。
简介
@thedarkita/agm 是一个 Angular 组件库，用于在 Google 地图上展示地理位置信息。通过使用该组件库，您可以轻松地在 Angular 应用程序中集成 Google 地图，并在其中显示地理位置信息、坐标点、多边形、标记等。
安装
首先你需要安装 @thedarkita/agm 包，可以通过以下命令安装：
npm install @thedarkita/agm
安装完成后，你需要在应用程序模块中导入'AgmCoreModule' 模块，并在 imports 中添加 AgmCoreModule 模块。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ------------------
-----------
-------- -
-----------------------
------- --------------
--
-
--请注意在使用该组件库之前，你需要先申请 Google 普通用户密钥或企业用户密钥，并将其替换为apiKey。
使用示例
基础地图
在模板文件中插入以下代码，即可在页面中显示一个基础的 Google 地图。
<agm-map [latitude]="lat" [longitude]="lng"></agm-map>
在组件文件中定义经纬度：
lat = 51.678418; lng = 7.809007;
标记 Marker
在模板文件中插入以下代码，即可在地图上添加一个标记。
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
多边形 Polygon
在模板文件中插入以下代码，即可在地图上添加一个多边形。
<agm-polygon [paths]="polygonPaths"></agm-polygon>
在组件文件中定义多边形坐标数组：
polygonPaths: LatLngLiteral[] = [
{ lat: 51.678418, lng: 7.809007 },
{ lat: 51.678418, lng: 7.809907 },
{ lat: 51.679418, lng: 7.809907 },
{ lat: 51.679418, lng: 7.809007 }
];总结
本文介绍了如何使用 @thedarkita/agm 包在 Angular 应用程序中展示 Google 地图，并添加标记和多边形等功能。通过学习本教程，您可以快速学习如何使用该组件库，并在实际项目中应用该技术。通过在 Google 地图上显示位置信息和坐标点，您可以为用户提供更加丰富和直观的信息展示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd381e8991b448e5764