<摘要>你将在第一章中學會以下知識:
如何建立一個網頁檔案
怎樣利用百度地圖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是指,不開啟地圖服務,例如公交駕車查詢等。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
2、設定地圖容器的樣式,放置<head></head>中
制定容器高度後,方能顯示出地圖。
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:100%}
</style>
你還可以自己規定容器的高度、寬度,邊框顔色等。比如
#milkMap{height:400px;width:600px;border:1px solid blue;}
3、在<body></body>中放置地圖容器
說明:id号是唯一的,在建立地圖的js中,要與此id對應起來。
<div id="milkMap"></div>
4、在</body></html>中放置自己的js
建立地圖使用new BMap.Map,建立點使用new BMap.Point。
建立地圖需要設定地圖中心點,與地圖級别。1級最大,能看見全球;18級最小,最詳細。
其中地圖級别的對應關系為,4級-國; 8級-省, 12級-市, 18級-街道。
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 建立地圖執行個體
var point = new BMap.Point(116.404, 39.915); // 建立點坐标
map.centerAndZoom(point, 15); // 初始化地圖,設定中心點坐标和地圖級别
</script>
4、一張2D地圖就建立完畢了。接下來,你可以運作你的地圖程式。
三、制作3D地圖
目前,隻支援北上廣深四個城市的3D圖。
map.centerAndZoom(point, 18); // 初始化地圖,設定中心點坐标和地圖級别
map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地圖類型為3D地圖
map.setCurrentCity("北京市"); //設定目前城市
四、添加對地圖進行滑鼠和鍵盤操作的功能
開啟滾輪縮放功能,該功能預設是禁用的。
關閉輕按兩下放大功能,該功能預設是開啟的。
enableScrollWheelZoom(); //開啟滾輪縮放功能
disableDoubleClickZoom(); //關閉輕按兩下放大功能
開啟鍵盤操作功能,該功能預設禁用。
鍵盤的上、下、左、右鍵可連續移動地圖。同時按下其中兩個鍵可使地圖進行對角移動。PgUp、PgDn、Home和End鍵會使地圖平移其1/2的大小。+、-鍵會使地圖放大或縮小一級。
enableKeyboard(); //開啟鍵盤操作功能
<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>
map.enableScrollWheelZoom(); //開啟滾輪縮放功能
map.disableDoubleClickZoom(); //關閉輕按兩下放大功能
map.enableKeyboard(); //開啟鍵盤操作功能
下一章預告《如何添加地圖控件》,敬請期待。