您的位置：首页 > 其它

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

2015-10-04 10:22 232 查看

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

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

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

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

<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>加载天地图</title>
	<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
</head>
<script type="text/javascript">
var cenL="113.3893";  //默认中心坐标经度
var cenB="23.04954"; //默认中心坐标纬度
var zoom=10; //默认缩放级别
var map;
    function LoadMap(){//加载基本地图和导航
    	try {
                              map = new TMap("mapDiv"); //初始化地图对象
                              if (zoom == 1) {  // 如果级别是1的话，就显示整张地图了。
                              	cenB = 0;
                              	cenL = 0;
                              }
                             map.centerAndZoom(new TLngLat(cenL, cenB), zoom);//设置显示地图的中心点和级别
                             map.enableHandleMouseScroll(); //允许鼠标双击放大地图   
                         } catch(err) {
                         	alert('天地图加载不成功，请稍候再试！你可以先使用其他功能！');
                         }
                     }
                 </script>
                 <body onload="LoadMap()">
                 	<style type="text/css">
                 		#mapDiv{
                 			height:600px;
                 			width: 100%;
                 			border: 1px solid #ccc;
                 		}
                 	</style>
                 	<div id="mapDiv"></div>
                 </body>
                 </html>

效果图：

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

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航