天地图-第四篇-地图信息获取及地图类型设置
<!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