leaflet.js_Leaflet.js是您将找到的最简单的地图库

Google Maps当然是Web设计人员中最受欢迎的嵌入式地图小部件 。 但是，如何添加自定义功能（例如工具提示和大头针标记）呢？

在这里，像Leaflet.js这样出色的库可以帮助很多人。

这是一个完全免费的开源项目，最初由Mapbox的一个叫Vladimir Agafonkin的人创建。 从那时起，Leaflet逐渐发展壮大，包括来自世界各地的数十名贡献者 。

它经常通过错误修复和新功能进行更新，以改善任何网站上的总体实施情况。 由于其强大的力量和设计美感，这是迄今为止我最喜欢的地图库。

它具有太多功能，我无法一一列举，但以下是最有趣的功能 ：

• 移动硬件加速
• 别针标记，形状叠加和工具提示
• 自定义缩放和平移动画
• 没有JS依赖
• 支持所有主流浏览器，包括IE7 +

实现有点棘手，因为您需要输入坐标并定义地图应该多大 。

用户始终可以缩小和平移 ，因此视图可以随时更改。 但这也基于您在页面上定义地图的方式。

有一个巨大的文档页面 ，其中包含有关Leaflet各个方面的信息。 可悲的是，它是如此密集，以至于我可能不建议您直接潜入其中，因为您可能会迷路。 相反，请查看Leaflet教程页面 ，该页面还包括针对新手的快速入门指南 。

您将学习如何嵌入地图，更改大小/位置以及如何在顶部添加自定义图形 ，例如圆形或大头针标记。

这份入门指南可以教您在博客，公司网站或任何即将进行的项目上使用Leaflet 所需的一切 。

有很多使用Google Maps的充分理由：它功能强大，值得信赖且免费。 但是Leaflet附带了许多其他功能 ，您只需要将CSS / JS文件添加到您的网页即可开始使用。 如果您喜欢走CDN路线，甚至可以找到在线托管的副本 。

不要让文档吓you您。 您可以学到很多东西，但是基本的Leaflet设置并不需要所有功能 。

从头开始创建一张惊人的地图并不需要太多。 看看使用Leaflet.js和Google Maps API创建的此Codepen演示 。

翻译自: https://www.hongkiat.com/blog/leafletjs/