百度地圖API，展示地圖和添加控件
1、申請百度賬號和AK
點我申請
2、準備頁面
根據HTML標準，每一份HTML文檔都應該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規範的文檔聲明：
<!DOCTYPE html>
3、適應移動端頁面展示
下面我們添加一個meta標簽，以便使您的頁面更好的在移動平臺上展示。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4、設置容器樣式
設置容器樣式大小，使地圖充滿整個瀏覽器窗口：
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
5、引用百度地圖API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
6、創建地圖容器元素
地圖需要一個HTML元素作為容器，這樣才能展現到頁面上。這裏我們創建了一個div元素。
<div id="container"></div>
7、創建地圖實例
位於BMap命名空間下的Map類表示地圖，通過new操作符可以創建一個地圖實例。其參數可以是元素id也可以是元素對象。
var map = new BMap.Map("container");
8、設置中心點坐標
這裏我們使用BMap命名空間下的Point類來創建一個坐標點。Point類描述了一個地理坐標點，其中118.024381表示經度，36.812327表示緯度。（為山東省淄博市張店區區政府坐標）
var point = new BMap.Point(118.024381,36.812327);
請註意：在使用百度地圖JavaScript API服務時，需使用百度BD09坐標，如使用其他坐標（ WGS84、GCJ02）進行展示，需先將其他坐標轉換為BD09，詳細說明請參考坐標轉換說明，請勿使用非官方的轉換方法！！！
目前國內主要有以下三種坐標系：
WGS84：為一種大地坐標系，也是目前廣泛使用的GPS全球衛星定位系統使用的坐標系。
GCJ02：又稱火星坐標系，是由中國國家測繪局制訂的地理信息系統的坐標系統。由WGS84坐標系經加密後的坐標系。
BD09：為百度坐標系，在GCJ02坐標系基礎上再次加密。其中bd09ll表示百度經緯度坐標，bd09mc表示百度墨卡托米制坐標。
非中國地區地圖，服務坐標統一使用WGS84坐標。
9、地圖初始化，同時設置地圖展示級別
在創建地圖實例後，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。 地圖必須經過初始化才可以執行其他操作。
map.centerAndZoom(point, 15);
*在地圖中使用鼠標滾輪控制縮放，需添加方法：
map.enableScrollWheelZoom(true);
10、地圖初始化
添加控件前，地圖需要進行初始化。例如，要將標準地圖控件添加到地圖中，可在代碼中添加如下內容：
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl());
11、添加多個控件：
在本例中我們向地圖添加一個平移縮放控件、一個比例尺控件和一個縮略圖控件。在地圖中添加控件後，它們即刻生效。
map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("北京"); // 僅當設置城市信息時，MapTypeControl的切換功能才能可用
12、控制控件位置
| anchor值 | 位置說明 |
| BMAP_ANCHOR_TOP_LEFT | 表示控件定位於地圖的左上角 |
| BMAP_ANCHOR_TOP_RIGHT | 表示控件定位於地圖的右上角 |
| BMAP_ANCHOR_BOTTOM_LEFT | 表示控件定位於地圖的左下角 |
| BMAP_ANCHOR_BOTTOM_RIGHT | 表示控件定位於地圖的右下角 |
13、控件位置偏移
除了指定停靠位置外，還可以通過偏移量來指示控件距離地圖邊界有多少像素。如果兩個控件的停靠位置相同，那麽控件可能會重疊在一起，這時就可以通過偏移值使二者分開顯示。
如下示例為：將比例尺放置在地圖的左下角，由於API默認會有版權信息，因此需要添加一些偏移值以防止控件重疊
var opts = {offset: new BMap.Size(150, 5)} map.addControl(new BMap.ScaleControl(opts));
14、修改控件配置
地圖API的控件提供了豐富的配置參數，您可參考API文檔來修改它們以便得到符合要求的控件外觀。例如，NavigationControl控件就提供了如下類型：
| 平移縮放控件的類型 |
說明 |
| BMAP_NAVIGATION_CONTROL_LARGE | 表示顯示完整的平移縮放控件 |
| BMAP_NAVIGATION_CONTROL_SMALL | 表示顯示小型的平移縮放控件 |
| BMAP_NAVIGATION_CONTROL_PAN | 表示只顯示控件的平移部分功能 |
| BMAP_NAVIGATION_CONTROL_ZOOM | 表示只顯示控件的縮放部分功能 |
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} map.addControl(new BMap.NavigationControl(opts));
百度地圖API，展示地圖和添加控件