天天看點

【百度地圖API】建立全國銀行位置查詢系統(一)——如何建立地圖

<摘要>你将在第一章中學會以下知識:

如何建立一個網頁檔案

怎樣利用百度地圖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建立一張簡單的地圖

【百度地圖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地圖

【百度地圖API】建立全國銀行位置查詢系統(一)——如何建立地圖

目前,隻支援北上廣深四個城市的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(); //開啟鍵盤操作功能

下一章預告《如何添加地圖控件》,敬請期待。

繼續閱讀