介绍
google-maps-angular2 是一个用于 Angular2 应用程序中的 google maps 包装器。它提供了一个直观、灵活的界面，让你能够轻松地将 google maps 集成到你的应用中。同时，它还提供了许多方便的功能，例如地图标记、自定义标记、聚合标记、地图事件等等。
安装
要使用 google-maps-angular2，你需要使用 npm 安装。
npm install google-maps-angular2 --save
集成到 Angular2
安装完成后，你需要将 google-maps-angular2 集成到你的 Angular2 应用程序中。
首先，在 app.module.ts 中导入 GoogleMapsModule 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ---------------- - ---- ----------------------- ----------- -------- --------------- ------------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
接下来，你就可以在你的组件中使用 google-maps-angular2 了。例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- ---------
--------- ------------ ----------------------------------
--
------ ----- ------------ -
-------- ---------- - -
------- ----- ---------- ---- -----------
----- -
--
-在上面的示例中，我们创建了一个包含 Google Maps 的应用程序，并将其放置在中心坐标为 {lat: 52.520007, lng: 13.404954} 的位置。这是柏林的坐标，因此在 zoom 设置为 5 时，我们可以看到大约是欧洲的地图。
地图标记
接下来，我们将向地图添加标记。该标记表示一个地方，它可能是你的公司、你的家、你最喜欢的餐厅等等。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ------------- - ---- -----------------------
------------
--------- ---------
--------- -
----------- --------------------
------------------ ----------------------------------------------
--------------
--
------ ----- ------------ -
-------- ---------- - -
------- ----- ---------- ---- -----------
----- -
--
-------------- ------------- - -
--------- ----- ---------- ---- ----------
--
-在上面的示例中，我们创建了一个标记并附加到我们的地图上。该标记将显示在中心坐标周围。
现在，我们需要显示更多的信息，例如地址等。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ------------- - ---- -----------------------
------------
--------- ---------
--------- -
----------- --------------------
------------------ --------------------------
--------------------------------------------------------
--------------------
--------------
--
------ ----- ------------ -
-------- ---------- - -
------- ----- ---------- ---- -----------
----- -
--
-------------- ------------- - -
--------- ----- ---------- ---- ----------
--
-在上面的示例中，我们添加了一个 Info-Window，该 Info-Window 显示我们的地址。
自定义标记
如果你的应用程序需要更多的标记，你可能需要以不同的颜色、图标、大小等形式自定义标记。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ------------- - ---- -----------------------
------------
--------- ---------
--------- -
----------- --------------------
------------------ ----------- ------ -- -------- ---------------------------
-------------------------------------------------------------------
--------------------
--------------
--
------ ----- ------------ -
-------- ---------- - -
------- ----- ---------- ---- -----------
----- -
--
-------- ----- - -
-
-------- -
--------- ----- ---------- ---- -----------
----- -
---- -------------------------------------------------------------------------------------------------
----------- -
------ ---
------- --
-
-
--
-------- ----------
--
-
-------- -
--------- ----- ---------- ---- -----------
----- -
---- -------------------------------------------------------------------------------------------------
----------- -
------ ---
------- --
-
-
--
-------- ----------
--
-
-------- -
--------- ----- ---------- ---- -----------
----- -
---- -------------------------------------------------------------------------------------------------
----------- -
------ ---
------- --
-
-
--
-------- ----------
-
--
-在上面的示例中，我们定义了三个标记，并自定义了标记的图标。
聚合标记
如果你有许多标记，为了避免地图变得拥挤，你可以使用聚合标记。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ------------- - ---- -----------------------
------------
--------- ---------
--------- -
----------- --------------------
-------------------------- ---------------------------
------------------ ----------- ------ -- -------- ---------------------------
-------------------------------------------------------------------
--------------------
----------------------------
--------------
--
------ ----- ------------ -
-------- ---------- - -
------- ----- ---------- ---- -----------
----- -
--
-------- ----- - -
-
-------- -
--------- ----- ---------- ---- ----------
--
-------- ----------
--
-
-------- -
--------- ----- ---------- ---- ----------
--
-------- ----------
--
-
-------- -
--------- ----- ---------- ---- ----------
--
-------- ----------
--
-
-------- -
--------- ----- ---------- ---- ----------
--
-------- ----------
-
--
-------------- - -
--------- ---
------------------- -
--
-在上面的示例中，我们为地图创建了聚合标记，并将三个标记附加到聚合标记中。
地图事件
当你的用户与地图交互时，你可能需要捕获这些事件。google-maps-angular2 提供了几个事件。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ------------- - ---- -----------------------
------------
--------- ---------
--------- -
----------- ------------------- --------------------------------
------------------ ----------- ------ -- -------- ---------------------------
-------------------------------------------------------------------
--------------------
--------------
--
------ ----- ------------ -
-------- ---------- - -
------- ----- ---------- ---- -----------
----- -
--
-------- ----- - -
-
-------- -
--------- ----- ---------- ---- ----------
--
-------- ----------
--
-
-------- -
--------- ----- ---------- ---- ----------
--
-------- ----------
--
-
-------- -
--------- ----- ---------- ---- ----------
--
-------- ----------
-
--
------------------ ---- -
-------------------
-
-在上面的示例中，我们使用了 mapClick 事件来捕获地图的点击事件，并使用 onMapClick 处理程序来输出事件对象到控制台。
总结
在本文中，我们介绍了 google-maps-angular2 包的使用。我们看到，它提供了很多方便的功能，例如地图标记、自定义标记、聚合标记、地图事件。我相信，掌握这些功能，你将能够创建出富含交互性和有用信息的地图应用程序，为你的用户带来更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580181e8991b448d5238