leaflet 开源js地图工具。非常好用。
leaflet参考：http://leafletjs.com/
特性：
- 完全开源，可以基于不同的第三方瓦片生成地图。
- 基于原始GPS，无需转换
- 可创建离线地图，不依赖网络
- 使用起来，灵活方便。
调用代码备忘：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>leaflet</title> <link href="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.js"></script> <style> html,body{ margin:0; padding:0; width:100%; height:100%; overflow:hidden; } </style> </head> <body> <!--地图容器--> <div style="100%;height:100%;font-size:12px" id="map"></div> <script> var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']; var layerList = { '道路地图':L.layerGroup([ L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}), ]), '影像地图':L.layerGroup([ L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}), ]), 'OpenStreet':L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}), "ArcGIS": L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',{ maxZoom: 18, reuseTiles: true }), "osm": L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'), "google_m": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=m@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }), "google_Streets": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }), "google_Hybrid": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=s,h@189&gl=cn&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }), "google_Satellite": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }), "google_Terrain": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=p@189&gl=cn&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }), }; var map = L.map("map", { center:[34,109], zoom: 5, layers: layerList['道路地图'], zoomControl: true }); L.control.scale({imperial:false}).addTo(map); L.control.layers(layerList, null).addTo(map); L.marker([34.2609052589,108.9423344082]).addTo(map); var imageUrl = 'http://i2.hexunimg.cn/2016-03-09/182664922.jpg', imageBounds = [[34, 108], [33, 109]]; L.imageOverlay(imageUrl, imageBounds).addTo(map); </script> </body> </html>