<!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>
直接上代码，不多哔哔