在创建您的第一个地图应用程序之前，先来了解一下主流的地图API和JavaScript库。

我们今天使用的大多数应用程序都将在地图上显示实时位置和数据。例如在线商品到我们使用地图的外卖递送应用程序。地图被广泛用于表示数据，我们总是希望能有更多的交互性。有许多不同的库和插件可供地图使用，有的是付费的，有的是开源的。

谷歌地图并不是地图应用程序的最终有效解决方案。它不提供任何定制选项，使其更方便您自己。如果您想用自己的功能实现它，就必须在市场上使用开放源码。在本文中，我们将看到不同的地图都包含用于使用地图库的JavaScript工具。

使用javascript函数库对地图进行分类

有很多工具可以使用JavaScript。我们可以根据这个来分类。

库（Libraries）：允许公共类和函数在更高的编程级别上构建应用程序。

包装器（Wrappers）：它充当调用者和包装代码之间的接口。

工具包（Toolkits）：它是模块化的，很容易集成到定制的应用程序中。

框架（Frameworks）：用于启用和支持服务的可重用组件，配置并与应用程序代码集成。

客户端（Clients）：最终产品需要使用的Web地图应用程序。

如何选择有效的解决方案

这取决于您将如何使用它们，以及您希望对其进行多大程度的定制以使其更具交互性。

当您在为地图选择工具时。您必须首先选择付费或开源框架。它们都有很多功能。

版本和升级

以 Google Maps 和 Leaflet 这两大产品为例。谷歌地图由谷歌控制。任何可用的更新都将由谷歌安排。Leaflet更新是经常和它发布新版本的新功能。插件更新独立于整个更新。

地图工具和库

一些工具将减少生成交互式地图的工作量。它允许您只用几行代码就可以创建一个动态地图。JS库会让你添加标记功能，绘制地图上特定点的自定义线路。

CSS允许你在地图中添加自定义样式。通过考虑所有这些功能，我们整合了以下库，这些库将帮助开发人员轻松快速地创建复杂的地图。

Leafletjs

官方站点： leafletjs.com/

GitHub stars: 28.1k, github.com/Leaflet/Lea…

价格：免费

地图数据来源：OpenStreetMap

依赖性：无

类别：JS库

示例： leafletjs.com/examples.ht…

Leaflet 是一个为建设移动设备友好的互动地图，而开发的、现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发，虽然代码仅有 38 KB，但它具有开发人员开发在线地图的大部分功能。

Leaflet 设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。

它包含强大的API文档和各种示例，方便供初学者快速查阅及上手。

推荐阅读相关入门教程：

入门Leaflet之小Demo

leafletjs可视化地理位置

leafLet API中文文档参考

Openlayers

官方站点： openlayers.org/

GitHub stars: 7.1k, github.com/openlayers/…

价格：免费

地图数据来源：OpenStreetMap

依赖性：无

类别：JS库

示例： openlayers.org/en/latest/e…

OpenLayers 也是创建交互式地图的最佳开源JavaScript框架。您可以使用向量贴片选择不同类型的样式地图。它还能够将矢量数据转换为GeoJson格式。它还为开发人员提供了更好的文档和工作代码示例。

最近公司项目中有个业务需求要实现Web GIS（网络地理信息系统）功能，开发一套军用模拟指挥系统，小编特地参考了很多资料，最终选定OpenLayers这个框架。等项目完成后，会写一篇开发使用心得及经验的分享文章。如下图所示：

推荐阅读相关入门教程：

OpenLayers基础教程

OpenLayers中文详解

Mapbox

官方站点： www.mapbox.com/

GitHub stars: 6.1k, github.com/mapbox/mapb…

价格：部分免费

地图数据来源：Mapbox

依赖性：无

类别：WEB应用程序

示例： docs.mapbox.com/mapbox-gl-j…

Mapbox 是用于创建高性能交互式地图的最先进的地图解决方案。它是由具有更多功能的开发人员构建的，比如定制标记、矢量图、静态地图和地理编码。它提供卫星图像和方向。

它还提供在线编辑器，使您的自定义地图与您自己的数据快速。该文档设计良好，易于使用。

推荐阅读相关入门教程：

Mapbox中文版

vue 地图可视化（2）mapbox篇

Google Maps API

官方站点： developers.google.com/maps/docume…

价格：部分免费

地图数据来源：Google

依赖性：无

类别：WEB应用程序

示例： developers.google.com/maps/docume…

Google Maps API最适合所有人，无论是有经验的还是初学者。很容易将谷歌地图与任何应用程序或网站集成。此外，WordPress用户有更多的插件来添加JavaScript谷歌地图API。

Datamaps

官方站点： datamaps.github.io/

GitHub stars: 3.4k, github.com/markmarkoh/…

价格：免费

地图数据来源：D3.js

依赖性：D3.js and TopoJSON

类别：JS库

示例： datamaps.github.io/

Datamaps 是一种用于数据可视化的交互式地图。它被绑定到一个单独的JavaScript文件中。它以JSON格式存储，您可以使用以下结构轻松创建任何自定义地图。

Bing Maps

官方站点： www.microsoft.com/en-us/maps/…

价格：免费

地图数据来源：Bing Maps

依赖性：无

类别：WEB应用程序

示例： docs.microsoft.com/en-us/bingm…

这个地图是由微软创建的，是一个非常流行的地图平台。它包含AJAX SDK，提供了示例代码和片段，供开发人员构建自定义地图。它提供多种API功能，如REST服务和空间数据服务。

ArcGIS

官方站点： developers.arcgis.com/

价格：部分免费

地图数据来源：Esri

依赖性：无

类别：框架

示例： developers.arcgis.com/javascript/…

ArcGIS 是一个轻量级的JavaScript框架，可以很容易地将地图嵌入到任何应用程序或网站中。它装载了大量的特性和示例。开发人员门户包含ArcGIS API和SDK。它为开发人员提供了很友好的文档。

推荐阅读相关入门教程：

vue地图可视化（3） ArcGIS篇

Zeemaps

官方站点： www.zeemaps.com/

价格：部分免费

依赖性：无

类别：WEB应用程序

示例： www.zeemaps.com/mobile?grou…

Zeemaps 是一种企业级地图服务，可以让你轻松的创建、发布和共享交互式地图，你可以构建可视化动态地理位置信息地图，例如标注企业用户的地理为hi，你曾经去过的地方，销售地图等等，所有的地图搜存储在官方服务器上，用户可以在任何地点、任何时间进行访问。

我希望您喜欢并了解JavaScript中的地图API和库，并根据您的需要为您的应用程序或网站创建一个高度交互的地图，选择最好的框架。

原文： medium.com/javascript-…

如有前端技术问题，请加微信好友： lazycode520 ，小编拉您进前端实战交流学习群。

推荐阅读相关优质文章

开发一款微信小程序的个性简历，能打开大厂之门并获得门票？（附源码）

Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享（附源码）

前端必知必会MySQL的那些事儿 - NodeJS全栈成长之路

2020值得收藏与学习280多款H5小游戏，从入门到彻底了解它（附源码）

获取更多项目实战经验及各种源码资源， 请关注作者公众号：懒人码农