前言
ngx-leaflet-material-icons-markers 是一个基于 ngx-leaflet 和 Material Icons 的标记点组件库，为开发者提供了丰富的图标样式以及简单易用的 API 接口，快速开发出高质量的地图应用。
本文将介绍如何使用 ngx-leaflet-material-icons-markers 搭建一个简单的地图应用，并详细讲解每个 API 的使用方法。
安装
首先，你需要通过 npm 将 ngx-leaflet-material-icons-markers 安装到你的项目中：
npm install ngx-leaflet-material-icons-markers --save
如果你之前没有安装 ngx-leaflet 或 Material Icons，需要将它们也一同安装：
npm install leaflet @asymmetrik/ngx-leaflet material-icons --save
示例
接下来，我们将使用 ngx-leaflet-material-icons-markers 构建一个简单的地图应用，并添加一些 Material Icons 样式的标记点。
配置
首先，我们需要在 app.module.ts 中引入 ngx-leaflet、ngx-leaflet-material-icons-markers 和 Material Icons：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------- - ---- --------------------------
------ - --------------------------------- - ---- -------------------------------------
------ - ------------- - ---- -------------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
--------------
----------------------------------
-------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -组件
在 app.component.ts 中，我们将引入 ngx-leaflet 的组件以及 ngx-leaflet-material-icons-markers 提供的组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- ---------- ---------- - ---- ----------
------ - ------------- - ---- -------------------------------------
------ - ------------- - ---- -----------------------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-------- -----------
------- ----
------------------- -------------- -------------- --
---------- -
------------ - -
------- -
--------------------------------------------------------------- -
-------- ---
------------ -----
--
--
----- ---
------- -------------- ---------
--
----------- - -
--------------------------------
-------------- ----------
--------------------------------
--
--------------------------------
-------------- ----------
--------------------------------
-
--
-
------------------------- -------- ------------- -
------ -
----- -
----- -----------
-------- -----
--------- ---- ---
-
--
-
-在 ngOnInit() 函数中，我们初始化了地图的选项 options，包括地图瓦片的 URL 和地图的中心坐标。同时，我们也新增了两个标记点 layers，通过 markerService.createMarker() 函数创建了两个使用 Material Icons 样式的标记点。
我们还提供了一个 createMarkerOptions() 函数，用于初始化标记点的配置选项，包括标记点的图标类型、图标 URL 和大小等。
模板
在 app.component.html 中，我们使用 ngx-leaflet 的组件来呈现地图：
<leaflet [leafletOptions]="options" [leafletLayers]="layers" style="height: 100vh;" ></leaflet>
在通过 LeafletMaterialIconsMarkersModule 引入 ngx-leaflet-material-icons-markers 后，我们就可以在 layers 中运用 markerService.createMarker() 函数来创建标记点。同时，我们还可以通过指定图标样式来美化标记点。
总结
通过 ngx-leaflet-material-icons-markers，我们可以快速地为基于 Leaflet 的应用添加 Material Icons 样式的标记点。此外，ngx-leaflet-material-icons-markers 还提供了丰富的 API 接口，让我们能够对标记点进行更进一步定制。
希望这篇文章能够帮助开发者们更加容易地上手 ngx-leaflet-material-icons-markers 和 Leaflet，享受开发地图应用的快乐。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a581e8991b448dfe4f