在现代Web应用程序中，地图是一种重要的交互手段。使用Google 地图能够使我们的应用程序地图功能更完善、更灵活。在本文中，我们将探讨如何在你的Angular应用程序中使用Google 地图。
前置知识
在使用Google 地图之前，你需要先注册一个Google Maps API秘钥。详情见Google Maps Platform。在注册完成后，会得到一个类似于这样的API密钥:
---------------------------------------
安装
首先，我们需要通过npm安装@agm/core：
--- ------- --------- ------
安装完成后，我们需要将 AgmCoreModule 和 AgmMap 导入到我们的 Angular 模块中：
------ - -------- - ---- ----------------
------ - ------------- - ---- ------------
------ - ------ - ---- ------------
-----------
-------- -
-----------------------
------- --------------
--
--
------------- -
------
--
---------- - ------------ -
--关于apikey的设置和使用，请参阅开发文档中心获取更多信息。
接着，我们需要将 AgmMap 添加到我们的组件 HTML 文件中：
-------- ---------------------- ---------------------------------
在这个示例中，我们将地图的中心放在了德国的多特蒙德，你可以用你想要拥有的全球任何地方的经纬度来代替。
我们还可以通过 [zoom] 属性来设置地图的缩放级别：
-------- ---------------------- ---------------------- ----------------------
至此，一个简单的 Google 地图已经添加到了我们的应用程序中。
自定义标记
现在，我们来看一下如何自定义地图标记。首先，我们需要使用 AgmMarker 组件来添加标记，代码如下：
-------- ---------------------- ---------------------- ------------
----------- ---------------------- ---------------------- ------------------------
-----------------------------------------------
----------在这个示例中，我们设置了标记的经纬度为地图中心，并将标记设置为可拖动，添加了一个 dragEnd 事件来更新标记位置。我们可以在组件的 TypeScript 文件中添加如下代码：
------ ---------------- ----- ---- - ---------------------- --- -
在拖动地图标记后，console中将会输出当前地图标记的经纬度。
我们还可以自定义标记的图标。首先，我们在模块中导入 AgmMarkerCluster :
------ - -------- - ---- ----------------
------ - ------------- - ---- ------------
------ - ------ - ---- ------------
------ - --------- - ---- ------------
------ - ---------------- - ---- ------------
-----------
-------- -
-----------------------
------- --------------
--
--
------------- -
------- ---------- ----------------
--
---------- - ------------ -
--然后，我们可以像下面一样添加标记：
-------- ---------------------- ---------------------- ------------ ----------- ---------------------- ---------------------- ---------------------------------------------------- ----------
在这个示例中，我们将标记的图标设置为了程序中的一个本地图片。
在地图上绘制形状
最后，我们来看一下如何在地图上绘制形状，如多边形等。我们需要先导入 AgmPolygon：
------ - -------- - ---- ----------------
------ - ------------- - ---- ------------
------ - ------ - ---- ------------
------ - --------- - ---- ------------
------ - ---------------- - ---- ------------
------ - ---------- - ---- ------------
-----------
-------- -
-----------------------
------- --------------
--
--
------------- -
------- ---------- ----------------- ----------
--
---------- - ------------ -
--然后，我们可以在模板中添加如下代码：
-------- ---------------------- ---------------------- ------------ ------------ ---------------------- ------------------------- -------------------------------------- ----------
在这个示例中，我们设置了多边形的路径，以及边框和填充颜色。
在组件中，我们可以声明 polygonPaths：
------ ------------- -------------------- - - - ---- ---------- ---- -------- -- - ---- ---------- ---- -------- -- - ---- ---------- ---- -------- -- - ---- ---------- ---- -------- -- - ---- ---------- ---- -------- -- - ---- ---------- ---- -------- - --
在这个示例中，我们设置了一个多边形路径的数组，路径按照经纬度给出。在实际应用中，你可以通过其他手段获取这个路径数组。
至此，你已经学习了如何在你的Angular应用程序中使用Google 地图，并添加自定义地图标记和多边形。
结论
Google 地图是一个高效、灵活的交互性地图。通过 Angular 和 Google 地图的结合使用，我们可以创建高度可定制的地图应用程序。希望今天的教程能为你带来帮助和指导，让你学会如何在自己的应用程序中使用地图功能，为你的用户带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671085b85f551281026bcf5a