<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图-地图参数设置</title>
<style>
/*设置地图显示大小*/
#mapDiv{
width: 600px;
height: 400px;
}
span{
padding: 10px;
}
</style>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
</head>
<body onLoad="onLoad()">
<!--地图容器-->
<div id="mapDiv"></div>
<div>
<span>设置经纬度及缩放级别:</span>
<span>经度</span><input id="lng" type="text" value="116.64899">
<span>纬度</span><input id="lat" type="text" value="40.12948">
<span>缩放级别</span><input id="zoom" type="text" value="12">
<input type="button" value="设置" onClick="setCenterAndZoom()"/>
</div>
<hr />
<div>
<span>是否允许鼠标双击放大:</span>
<input type="button" onClick="map.enableDoubleClickZoom()" value="允许双击地图放大"/>
<input type="button" onClick="map.disableDoubleClickZoom()" value="禁止双击地图放大"/>
</div>
<hr />
<div >
<p>是否允许滚动鼠标滑轮缩放:</p>
<input type="button" onClick="map.enableScrollWheelZoom()" value="允许鼠标滚轮缩放地图"/>
<input type="button" onClick="map.disableScrollWheelZoom()" value="禁止鼠标滚轮缩放地图"/>
</div>
<hr />
<div>
<p>是否允许滚动鼠标惯性滑动:</p>
<input type="button" onClick="map.enableInertia()" value="允许鼠标地图惯性拖拽"/>
<input type="button" onClick="map.disableInertia()" value="禁止鼠标地图惯性拖拽"/>
</div>
<hr />
<div>
<p>是否允许键盘操作地图:(小键盘上的四个方向键,地图将向相应的方向移动一段距离;敲击大小键盘上的+、-两个键,地图将放大或缩小)</p>
<input type="button" id="button1" onClick="map.enableKeyboard()" value="允许键盘操作地图"/>
<input type="button" id="button2" onClick="map.disableKeyboard()" value="禁止键盘操作地图"/>
</div>
<hr />
<div>
<span>地图样式:</span>
<input type="button" onClick="map.setStyle('black')" value="block"/>
<input type="button" onClick="map.setStyle('indigo')" value="indigo"/>
<input type="button" onClick="map.removeStyle()" value="恢复默认"/>
</div>
</body>
<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 setCenterAndZoom() {
var lng = document.getElementById("lng").value;
var lat = document.getElementById("lat").value;
var zoom = document.getElementById("zoom").value;
map.centerAndZoom(new T.LngLat(lng, lat), zoom);
}
</script>
</html>
直接上代码,不多哔哔。