在现代 Web 开发工作中，使用地图是一个非常常见的场景。在 Angular 中，实现地图标记需要结合第三方地图库以及官方提供的 @agm/core 库。
准备工作
首先，需要选择一个合适的地图 API 库。常见的地图 API 库有 Google Maps、Baidu Maps、高德地图、腾讯地图等。本文将以 Google Maps API 为例进行演示。
其次，需要在项目中引入 @agm/core 库，该库是 Angular 官方提供的 Google Maps 组件的集成库。通过 npm 安装即可：
--- ------- ---------
实现步骤
接下来，我们将会实现使用 Google Maps 在地图上添加标记的功能。
- 创建 Google Maps API
首先，需要在 Google Cloud 平台申请一个项目，并创建一个 API KEY，用于访问 Google Maps API。在控制台新建项目后，进入 API 和服务 -> 凭据 页面，创建一个 API KEY 即可。
- 调用 Google Maps API
在 Angular 中，我们可以使用 AgmCoreModule 中的 AgmMap 组件调用 Google Maps API。
-------- ---------------- ------------------ ----------- ---------------- ------------------------------- ----------
如上所示，我们可以通过 agm-map 组件指定地图的初始坐标，通过 agm-marker 组件为地图添加标记。此处的 lat 和 lng 是指初始坐标的经纬度，需要根据实际情况进行设置。
- 监听标记事件
最后，我们需要根据需求监听标记事件。例如，我们可以通过监听 markerClick 事件，实现点击标记时弹出信息框的功能。
----------- --------------------------------- ---------------- ------------------------------- ---------------- ----------- -------------------- ------------------------ ---- -------------------------- ------------------
如上所示，我们创建了一个 agm-info-window 组件，用于显示在标记上方的信息框。通过监听 markerClick 事件，即可在点击标记时打开信息框。
示例代码
下面是一个完整的地图标记示例代码，包括在地图上添加标记、监听标记事件等功能。
---- ------ ------------- ---
-------- ---------------- ------------------
---- -------------- ---
----------- --------------------------------- ---------------- -------------------------------
---- ---------------------- ---
---------------- ----------- --------------------
------------------------
----
--------------------------
------------------
----------点击标记时会弹出一个信息框，在信息框中可以添加自定义内容。
结论
通过上面的示例代码，我们可以看到，使用 Angular 实现地图标记非常简单，只需要安装 @agm/core 库即可，同时该库也提供了许多其它功能，可以在日常开发中极大地提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670e55fc5f5512810260914b