<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图-基本地图</title>
<style>
/*设置地图显示大小*/
#mapDiv{
width: 600px;
height: 400px;
}
</style>
</head>
<body onLoad="onLoad()">
<!--地图容器-->
<div id="mapDiv"></div>
<div>
<input type="button" id="button1" value="放大地图"/>
<input type="button" id="button2" value="缩小地图"/>
<input type="button" id="button3" value="向右移动"/>
<input type="button" id="button4" value="向左移动"/>
<input type="button" id="button5" value="向上移动"/>
<input type="button" id="button6" value="向下移动"/>
<input type="button" id="button7" value="获取地图范围"/>
</div>
</body>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<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;
var lng = 116.40969;
var lat = 39.89945;
var i = 1;
function onLoad() {
map = new T.Map("mapDiv");
map.centerAndZoom(new T.LngLat(lng, lat), zoom);
}
/*放大地图*/
$("#button1").click(function(){
map.zoomIn();
});
/*缩小地图*/
$("#button2").click(function(){
map.zoomOut();
});
/*向右移动*/
$("#button3").click(function(){
map.panTo(new T.LngLat(lng+i,lat));
i++;
});
/*向左移动*/
$("#button4").click(function(){
map.panTo(new T.LngLat(lng-i,lat));
i++;
});
/*向上移动*/
$("#button5").click(function(){
map.panTo(new T.LngLat(lng,lat+i));
i++;
});
/*向下移动*/
$("#button6").click(function(){
map.panTo(new T.LngLat(lng,lat-i));
i++;
});
/*获取可视化区域*/
$("#button7").click(function(){
//获取可视区域
var bs = map.getBounds();
//可视区域左下角
var bssw = bs.getSouthWest();
//可视区域右上角
var bsne = bs.getNorthEast();
alert("当前地图可视范围是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
});
</script>
</html>
对地图的一些简单操作,相关的方法具体参数参考官网。