Openlayers 3.11.1 前端地图框架，还是很好用的，被惊艳到了，还是我太落后了。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>map</title>
5 <link rel="stylesheet" type="text/css" href="css/ol.css">
6 <script type="text/javascript" src = "build/ol.js"></script>
7 <style type="text/css">
8 html,body{
9 height: 100%;
10 }
11 #demo{
12 width: 100%;
13 height: 100%
14 }
15 </style>
16 </head>
17 <body>
18 <div id="demo"></div>
19 <script type="text/javascript">
20 map = new ol.Map({
21 target: 'demo',
22 layers: [ //图层加载
23 new ol.layer.Tile({
24 source: new ol.source.OSM()
25 }),
26 // new ol.layer.Tile({
27 // source: new ol.source.XYZ({
28 // url: "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
29 // })
30 // }),
31 new ol.layer.Tile({
32 source: new ol.source.XYZ({
33 url: "http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}"
34 })
35 })
36 ],
37 view: new ol.View({
38 center: ol.proj.fromLonLat([116.4, 39.9]),//首次打开地图中心坐标
39 zoom: 12,//放大比例
40 }),
41 controls: ol.control.defaults().extend([
42 new ol.control.FullScreen(), //全屏控件
43 new ol.control.ScaleLine(), //比例尺
44 new ol.control.OverviewMap(), //鹰眼控件 小地图
45 new ol.control.Rotate(),
46 new ol.control.MousePosition(), //鼠标坐标
47 new ol.control.ZoomSlider(), //缩放滑块
48 ]),
49 });
50 </script>
51 </body>
52 </html>
想深入学习的化，有个国内大神写的API教程，很详细