百度地图DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>百度地图Demo01</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=9f3caf0f96e461b6e78d6d5bf6c7a425"></script> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #BaiduMap{ height:600px; width:1000px;} </style> <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { //页面完全加载后执行 } function btn01() { map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); //设置中心点及缩放级别 } function btn02() { map.addControl(new BMap.NavigationControl()); //地图平移缩放控件 } function btn03() { map.addControl(new BMap.ScaleControl()); //比例尺控件 map.addControl(new BMap.OverviewMapControl()); //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图 map.addControl(new BMap.MapTypeControl()); //地图类型控件 map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用 } function btn04() { map.addControl(new BMap.GeolocationControl()); //定位控件，针对移动设备 } </script> </head> <body> <div> <h2>百度地图DEMO</h2> </div> <div> <input id="Button1" type="button" value="设置中心坐标" onclick="btn01();" /> <input id="Button2" type="button" value="添加地图平移缩放控件" onclick="btn02();" /> <input id="Button3" type="button" value="添加其它控件" onclick="btn03();" /> <input id="Button4" type="button" value="添加定位控件（移动设备）" onclick="btn04();" /> </div> <div id="BaiduMap"> </div> <script type="text/javascript"> var map = new BMap.Map("BaiduMap"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 </script> </body> </html>