<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图</title>
<style>
/*设置地图显示大小*/
#mapDiv{
width: 600px;
height: 400px;
position: relative;
float: left;
}
span{
padding: 10px;
}
</style>
</head>
<body onLoad="onLoad()">
<!--地图容器-->
<div id="mapDiv"></div>
<div class="menu">
<span>获取地图中心坐标:</span>
<input type="button" onClick="getMapCenter()" value="获取地图中心点坐标"/>
</div>
<div>
<span>获取地图缩放级别:</span>
<input type="button" onClick="getMapZoom()" value="获取地图缩放级别"/>
</div>
<div>
<span>获取地图可视范围:</span>
<input type="button" onClick="getMapBounds()" value="获取地图可视范围"/>
</div>
<div>
<span>获取地图投影类型:</span>
<input type="button" onClick="getMapCode()" value="获取地图投影类型"/>
</div>
<div>
<span>设置地图投影类型:</span>
<input type="button" onClick="setMapType(TMAP_NORMAL_MAP)" value="普通街道视图"/>
<input type="button" onClick="setMapType(TMAP_SATELLITE_MAP)" value="卫星视图"/>
<input type="button" onClick="setMapType(TMAP_HYBRID_MAP)" value="卫星和路网的混合视图"/>
<input type="button" onClick="setMapType(TMAP_TERRAIN_MAP)" value="地形视图"/>
<input type="button" onClick="setMapType(TMAP_TERRAIN_HYBRID_MAP)" value="地形和路网的混合视图。"/>
</div>
</body>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
<script type="text/javascript">
var map;
var zoom = 12;
function onLoad() {
map = new T.Map("mapDiv");
map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
}
//获取地图中心坐标
function getMapCenter(){
alert("当前地图中心点:" + map.getCenter().getLng() + "," + map.getCenter().getLat());
}
//获取地图缩放级别
function getMapZoom() {
alert("当前地图缩放级别:" + map.getZoom());
}
//获取地图可视范围
function getMapBounds() {
var bs = map.getBounds(); //获取可视区域
var bssw = bs.getSouthWest(); //可视区域左下角
var bsne = bs.getNorthEast(); //可视区域右上角
alert("当前地图可视范围是:" + bssw.getLng() + "," + bssw.getLat() + "到" + bsne.getLng() + "," + bsne.getLat());
}
//地图投影类型信息
function getMapCode(){
alert("地图投影类型信息是:"+map.getCode())
}
//设置地图投影类型
function setMapType(e){
//移动图层
map.removeControl(e);
//添加图层
map.addControl(e);
}
</script>
</html>
地图参数有很多,这里就不一一列举了,具体的请参考官方api。