<摘要>你將在第一章中學會以下知識：
- 如何創建一個網頁文件
- 怎樣利用百度地圖API建立一張2D地圖，以及3D地圖
- 如何添加對地圖進行鼠標和鍵盤操作的功能
-------------------------------------------------------------------------------------------------------------------
一、創建網頁文件
粘貼以下代碼至記事本中，保存文件爲bank1-1.htm文件。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地圖API學習</title>
</head>
<body>
在這裏填入你的地圖程序
</body>
</html>二、使用百度地圖API建立一張簡單的地圖
1、引用API的js，放置bank1-1.htm的<head></head>中
說明：
v=1.1這是API的版本，表明是1.1版本的。
sercices=false是指，不開啓地圖服務，例如公交駕車查詢等。
2、設置地圖容器的樣式，放置<head></head>中
說明：
制定容器高度後，方能顯示出地圖。
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:100%}
</style>
你還可以自己規定容器的高度、寬度，邊框顏色等。比如
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
3、在<body></body>中放置地圖容器
說明：id號是唯一的，在創建地圖的js中，要與此id對應起來。
4、在</body></html>中放置自己的js
說明：
創建地圖使用new BMap.Map，創建點使用new BMap.Point。
創建地圖需要設置地圖中心點，與地圖級別。1級最大，能看見全球；18級最小，最詳細。
其中地圖級別的對應關係爲，4級-國； 8級-省， 12級-市， 18級-街道。
var map = new BMap.Map("milkMap"); // 創建地圖實例
var point = new BMap.Point(116.404, 39.915); // 創建點座標
map.centerAndZoom(point, 15); // 初始化地圖，設置中心點座標和地圖級別
</script>
5、一張2D地圖就創建完畢了。接下來，你可以運行你的地圖程序。
三、製作3D地圖
說明：
說明：
使用 BMAP_PERSPECTIVE_MAP 使地圖變成3D類型。設置3D地圖，需要首先setCurrentCity，設置當前城市。
目前，只支持北上廣深四個城市的3D圖。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地圖API學習</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
</head>
<body>
<div id="milkMap"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 創建地圖實例
var point = new BMap.Point(116.404, 39.915); // 創建點座標
map.centerAndZoom(point, 18); // 初始化地圖，設置中心點座標和地圖級別
map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地圖類型爲3D地圖
map.setCurrentCity("北京市"); //設置當前城市
</script>
</html>四、添加對地圖進行鼠標和鍵盤操作的功能
開啓滾輪縮放功能，該功能默認是禁用的。
關閉雙擊放大功能,該功能默認是開啓的。
disableDoubleClickZoom(); //關閉雙擊放大功能
開啓鍵盤操作功能，該功能默認禁用。
鍵盤的上、下、左、右鍵可連續移動地圖。同時按下其中兩個鍵可使地圖進行對角移動。PgUp、PgDn、Home和End鍵會使地圖平移其1/2的大小。+、-鍵會使地圖放大或縮小一級。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地圖API學習</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
</head>
<body>
<div id="milkMap" style="float:left;"></div>
<div style="float:right;width:400px;">
<p>開啓滾輪縮放</p>
<p>關閉雙擊放大</p>
<p>開啓鍵盤操作</p>
<p>說明:鍵盤的上、下、左、右鍵可連續移動地圖。同時按下其中兩個鍵可使地圖進行對角移動。PgUp、PgDn、Home和End鍵會使地圖平移其1/2的大小。+、-鍵會使地圖放大或縮小一級。</p>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 創建地圖實例
var point = new BMap.Point(116.404, 39.915); // 創建點座標
map.centerAndZoom(point, 18); // 初始化地圖，設置中心點座標和地圖級別
map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地圖類型爲3D地圖
map.setCurrentCity("北京市"); //設置當前城市
map.enableScrollWheelZoom(); //開啓滾輪縮放功能
map.disableDoubleClickZoom(); //關閉雙擊放大功能
map.enableKeyboard(); //開啓鍵盤操作功能
</script>
</html>