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