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="width: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>