天地图专题一：加载天地图

最近公司的项目到了尾声。总结一下项目中的一些技术。其中有涉及到天地图的部分。 类似百度地图，google地图。 我们要用一些它的公共接口，实现一些我们的效果。  比如在地图上显示我们的设备的位置，范围，运行轨迹等等。

大多数的功能其实都只是参考天地图官方api。http://api.tianditu.com/api-new/webIndex.html。

基本上要实现什么功能就去看一下api。就能解决多半的问题。但是实际运用中的话可能只看接口还无法灵活地运用起来。所以这里写一个天地图系列文章，希望给广大程序员同胞们一点参考。

 

加载天地图首先要引入官方的js:

[html] view plain copy
 
  1. <script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>  

给它一个放地图的div。设置好样式，id。

然后调用给它一个缩放级别，以及一个中心点，调用TMap();生成地图放到页面。缩放级别有18级。代码:

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>加载天地图</title>  
  6.     <script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>  
  7. </head>  
  8. <body>  
  9.     <style type="text/css">  
  10.         #mapDiv{  
  11.             height:600px;  
  12.             border: 1px solid #ccc;  
  13.             margin: 10px;  
  14.   
  15.         }  
  16.     </style>  
  17.     <div id="mapDiv"></div>  
  18.     <script type="text/javascript">  
  19.     function loadMap(){//加载基本地图和导航  
  20.         try {  
  21.             map = new TMap("mapDiv"); //初始化地图对象  
  22.              map.centerAndZoom(new TLngLat(103.388611,35.563611), 4);//设置显示地图的中心点和级别-中国  
  23.             map.enableHandleMouseScroll(); //允许鼠标双击放大地图     
  24.         } catch(err) {  
  25.             alert('图加载不成功，请稍候再试！你可以先使用其他功能！');  
  26.         }  
  27.     }  
  28.     loadMap();  
  29. </script>  
  30. </body>  
  31. </html>  



 

 

效果图：

 

这样我们就加载了一张基本的地图了。

更多的内容请关注本系列后续文章。

 

项目下载地址：https://github.com/liusaint/tiandituMap

演示地址：http://runningls.com/demos/tianditu/index.html?to=loadmap

posted @ 2017-03-01 14:53  疯子110  阅读(5836)  评论(0)  编辑  收藏  举报