1、Leafletjs(免费)
一个开放源代码的 JavaScript 库,用于移动友好的交互式地图。
官网地址:
https://leafletjs.com
GitHub 网址:
https://github.com/Leaflet/Leaflet
地图数据来源
地图数据 @ OpenStreetMap 提供者,CC-BY-SA,图像 @ Mapbox。
类别:JS库
简单应用
在这里,我们在'map'div
中创建一个地图,添加我们选择的图块,然后在弹出窗口中添加带有一些文本的标记:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
具体的如何使用,可以去官网查看“快速入门指南”。
2、Openlayers(免费)
可以使在任何网页中轻松放置动态地图变得容易。它可以显示从任何来源加载的地图图块,矢量数据和标记。
官网地址:
https://openlayers.org
GitHub 网址:
https://github.com/openlayers/openlayers
地图数据来源
地图数据 @ OpenStreetMap 提供者
类别:JS库
简单应用
安装
npm install ol
3、Mapbox(部分免费)
用于在网络上进行交互式,可自定义的矢量地图。
官网地址:
https://www.mapbox.com
GitHub 网址:
https://github.com/mapbox/mapbox-gl-js
地图数据来源
地图数据 @ Mapbox 提供者
类别:WEB应用程序
4、Google Maps API(部分免费)
Google Maps API最适合所有人,无论是有经验的还是初学者。很容易将谷歌地图与任何应用程序或网站集成。
官网地址:
https://developers.google.com/maps/documentation
地图数据来源
地图数据 @ Google 提供者
类别:WEB应用程序
中文学习文档
https://www.runoob.com/googleapi/googleapi-tutorial.html
5、Datamaps(免费)
使用 D3.js 在单个 Javascript 文件中针对 Web 的可定制 SVG 地图可视化。
官网地址:
https://datamaps.github.io
GitHub 网址:
https://github.com/markmarkoh/datamaps
地图数据来源
地图数据 @D3.js 提供者
类别:JS库
6、Bing Maps(免费)
跨 Web,移动,Windows 和混合现实构建智能的基于位置的应用程序和体验
官网地址:
https://www.microsoft.com/en-us/maps/choose-your-bing-maps-api
地图数据来源
地图数据 @Bing Maps 提供者
类别:WEB应用程序
7、ArcGIS(部分免费)
面向开发人员的完整映射和分析平台
官网地址:
https://developers.arcgis.com
地图数据来源
地图数据 @Esri 提供者
类别:框架
8、Zeemaps(部分免费)
创建和发布交互式地图
官网地址:
https://www.zeemaps.com
类别:WEB应用程序