Hello World
開始學(xué)習(xí)百度地圖API最簡(jiǎn)單的方式是看一個(gè)簡(jiǎn)單的示例。以下代碼創(chuàng)建了一個(gè)地圖并以天安門作為地圖的中心：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密鑰&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); // 創(chuàng)建地圖實(shí)例
var point = new BMap.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo)
map.centerAndZoom(point, 15); // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
</script>
</body>
</html>下面我們分步向您介紹：
準(zhǔn)備頁面
根據(jù)HTML標(biāo)準(zhǔn)，每一份HTML文檔都應(yīng)該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規(guī)范的文檔聲明：
<!DOCTYPE html>
您也可以根據(jù)需要選擇其他類型的文檔聲明，這樣瀏覽器會(huì)以標(biāo)準(zhǔn)的方式對(duì)頁面進(jìn)行渲染，保證頁面最大的兼容性。我們不建議您使用quirks模式進(jìn)行開發(fā)。
下面我們添加一個(gè)meta標(biāo)簽，以便使您的頁面更好的在移動(dòng)平臺(tái)上展示。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
接著我們?cè)O(shè)置樣式，使地圖充滿整個(gè)瀏覽器窗口：
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>引用百度地圖API文件使用V1.4及以前版本的引用方式：
創(chuàng)建地圖容器元素 地圖需要一個(gè)HTML元素作為容器，這樣才能展現(xiàn)到頁面上。這里我們創(chuàng)建了一個(gè)div元素。
命名空間 API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
創(chuàng)建地圖實(shí)例
var map = new BMap.Map("container");位于BMap命名空間下的Map類表示地圖，通過new操作符可以創(chuàng)建一個(gè)地圖實(shí)例。其參數(shù)可以是元素id也可以是元素對(duì)象。
注意在調(diào)用此構(gòu)造函數(shù)時(shí)應(yīng)確保容器元素已經(jīng)添加到地圖上。
創(chuàng)建點(diǎn)坐標(biāo)
var point = new BMap.Point(116.404, 39.915);
這里我們使用BMap命名空間下的Point類來創(chuàng)建一個(gè)坐標(biāo)點(diǎn)。Point類描述了一個(gè)地理坐標(biāo)點(diǎn)，其中116.404表示經(jīng)度，39.915表示緯度。
地圖初始化
map.centerAndZoom(point, 15);
在創(chuàng)建地圖實(shí)例后，我們需要對(duì)其進(jìn)行初始化，BMap.Map.centerAndZoom()方法要求設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。 地圖必須經(jīng)過初始化才可以執(zhí)行其他操作。
地圖配置與操作
地圖被實(shí)例化并完成初始化以后，就可以與其進(jìn)行交互了。API中的地圖對(duì)象的外觀與行為與百度地圖網(wǎng)站上交互的地圖非常相似。它支持鼠標(biāo)拖拽、滾輪縮放、雙擊放大等交互功能。您也可以修改配置來改變這些功能。 比如，默認(rèn)情況下地圖不支持鼠標(biāo)滾輪縮放操作，因?yàn)檫@樣可能會(huì)影響整個(gè)頁面的用戶體驗(yàn)，但是如果您希望在地圖中使用鼠標(biāo)滾輪控制縮放，則可以調(diào)用map.enableScrollWheelZoom方法來開啟。配置選項(xiàng)可以在Map類參考的配置方法一節(jié)中找到。
此外，您還可以通過編程的方式與地圖交互。Map類提供了若干修改地圖狀態(tài)的方法。例如：setCenter()、panTo()、zoomTo()等等。
下面示例顯示一個(gè)地圖，等待兩秒鐘后，它會(huì)移動(dòng)到新中心點(diǎn)。panTo()方法將讓地圖平滑移動(dòng)至新中心點(diǎn)，如果移動(dòng)距離超過了當(dāng)前地圖區(qū)域大小，則地圖會(huì)直跳到該點(diǎn)。
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function(){
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);