kongxx的专栏

首先我们声明一些变量，除了map之外，还声明了两个点的坐标 latlngA 和 latlngB，已经两个标记 markerA 和 markerB，另外还包括一条直线 polyline。在地图应用中有时候需要计算两点之间的距离，在Leaflet中我们可以使用Leaflet提供的distance方法来实现。下面看一个例子在地图上用鼠标选择两个点，然后画一条直线，并计算距离。下面来处理距离计算，主要是通过。然后初始化地图，可以设置坐标。，这里使用定位到当前位置。

在做地图应用时，有时需要根据指定的坐标来画一个圆形区域，比如签到打卡类的应用，此时我们可以使用。来在在指定坐标上创建一个圆并添加到的地图上，其中可以通过。

接前一篇文章，前一篇文章我们使用 SVG 创建了带有动态文字的图标，今天再看看怎样在地图上根据动态图标生成相关的legend，当然这里也还是使用了 SVG 来生成相关颜色的 legend。看下面的代码，生成了一个 svg 节点，其中包含了一个带有颜色的圆形图标和一个文字说明。完整的 map.component.ts 文件如下，其它代码参考前一篇文章。

但是如果我们想在标记上添加文字就没法实现了，比如我们在标记上添加一些统计数字。此时，我们可以通过来插入一个svg图片来实现这个功能。完整的 map.component.ts 文件如下，其它代码参考前一篇文章。接前一篇文章，在 Leaflet 中，我们可以使用。

Leaflet是一个用于创建地图的JavaScript库，它包含许多功能，并且非常适用于移动设备。