想要在HTML中載入百度地圖，使用js形式，先去申請個祕鑰，然後輸入ak=

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=#"></script>

其他的跟HTML沒啥區別，這裡只說API部分。
建立例項：

var map = new BMap.Map("allmap");    // 建立Map例項

從此，後面的東西都是跟這個map有關了。

比如設定方法用：

比如：map.doSomething(params);

doSomething是map的方法，params是這個方法的引數（可以是物件或者字串引數）。
在建立map之後第一件事是要建立地圖起始點和顯示級別：

map.centerAndZoom(new BMap.Point(120, 22), 11);

centerAndZoom就是map的一個方法，第一個引數Point作為地圖中心座標點，第二個引數是級別，級別數字越小看到的地圖範圍越大。
又比如設定當前城市是廣州：

map.setCurrentCity("廣州");

1. 設定地圖配置

地圖的拖曳，縮放等
一般直接用API已有的配置方法：
方法 返回值 說明

enableDragging()    none    啟用地圖拖拽，預設啟用。
disableDragging
 
()   none    禁用地圖拖拽。
enableScrollWheelZoom() none    啟用滾輪放大縮小，預設禁用。
disableScrollWheelZoom()    none    禁用滾輪放大縮小。
enableDoubleClickZoom() none    啟用雙擊放大，預設啟用。
disableDoubleClickZoom()    none    禁用雙擊放大。
enableKeyboard()    none    啟用鍵盤操作，預設禁用。鍵盤的上、下、左、右鍵可連續移動地圖。同時按下其中兩個鍵可使地圖進行對角移動。PgUp、PgDn、Home和End
 
鍵會使地圖平移其1/2的大小。+、-鍵會使地圖放大或縮小一級。
disableKeyboard()   none    禁用鍵盤操作。
enableInertialDragging()    none    啟用地圖慣性拖拽，預設禁用。
(自 1.1 新增)
disableInertialDragging()   none    禁用地圖慣性拖拽。
(自 1.1 新增)
enableContinuousZoom()  none    啟用連續縮放效果，預設禁用。
(自 1.1 新增)
disableContinuousZoom() none    禁用連續縮放效果。
(自 1.1 新增)
enablePinchToZoom() none    啟用雙指操作縮放，預設啟用。
(自 1.1 新增)
disablePinchToZoom()    none    禁用雙指操作縮放。
(自 1.1 新增)
enableAutoResize()  none    啟用自動適應容器尺寸變化，預設啟用。
(自 1.2 新增)
disableAutoResize() none    禁用自動適應容器尺寸變化。
(自 1.2 新增)
setDefaultCursor(cursor:String) none    設定地圖預設的滑鼠指標樣式。引數cursor應符合CSS的cursor屬性規範。
(自 1.1 新增)
getDefaultCursor()  String  返回地圖預設的滑鼠指標樣式。
(自 1.1 新增)
setDraggingCursor(cursor:String)    none    設定拖拽地圖時的滑鼠指標樣式。引數cursor應符合CSS的cursor屬性規範。
(自 1.1 新增)
getDraggingCursor() String  返回拖拽地圖時的滑鼠指標樣式。
(自 1.1 新增)
setMinZoom(zoom:Number) none    設定地圖允許的最小級別。取值不得小於地圖型別所允許的最小級別。
(自 1.2 新增)
setMaxZoom(zoom:Number) none    設定地圖允許的最大級別。取值不得大於地圖型別所允許的最大級別。
(自 1.2 新增)

2. 獲取地圖狀態引數

getBounds() Bounds  返回地圖可視區域，以地理座標表示。
getCenter() Point   返回地圖當前中心點。
getDistance(start:Point, end:Point) Number  返回兩點之間的距離，單位是米。(自 1.1 新增)
getMapType()    MapType 返回地圖型別。(自 1.2 新增)
getSize()   Size    返回地圖檢視的大小，以畫素表示。
getViewport(view: Array<Point>[, viewportOptions: ViewportOptions]) Viewport    根據提供的地理區域或座標獲得最佳的地圖視野，返回的物件中包含center和zoom屬性，分別表示地圖的中心點和級別。此方法僅返回視野資訊，不會將新的中心點和級別做用到當前地圖上。(自 1.1 新增)
getZoom()   Number  返回地圖當前縮放級別。

3. 新增事件監聽

形式為：

map.addEventListener("operate",function(e){doSomething});

比如新增單擊事件：

map.addEventListener("click",function(e){
alert('click');
});

其中的一些操作監聽事件：
事件 引數 描述

click   {type, target, point, pixel, overlay}   左鍵單擊地圖時觸發此事件。
當雙擊時，產生的事件序列為： click click dblclick (自 1.1 更新)

dblclick    {type, target, pixel, point}    滑鼠雙擊地圖時會觸發此事件。
rightclick  {type, target, point, pixel, overlay}   右鍵單擊地圖時觸發此事件。
當雙擊時，產生的事件序列為： rightclick rightclick rightdblclick (自 1.1 更新)

rightdblclick   {type, target, point, pixel, overlay}   右鍵雙擊地圖時觸發此事件。
(自 1.1 新增)

maptypechange   {type, target}  地圖型別發生變化時觸發此事件。
(自 1.1 新增)

mousemove   {type, target, point, pixel, overlay}   滑鼠在地圖區域移動過程中觸發此事件。
(自 1.1 新增)

mouseover   {type, target}  滑鼠移入地圖區域時觸發此事件。
(自 1.2 新增)

mouseout    {type, target}  滑鼠移出地圖區域時觸發此事件。
(自 1.2 新增)

movestart   {type, target}  地圖移動開始時觸發此事件。
moving  {type, target}  地圖移動過程中觸發此事件。
moveend {type, target}  地圖移動結束時觸發此事件。
zoomstart   {type, target}  地圖更改縮放級別開始時觸發觸發此事件。
zoomend {type, target}  地圖更改縮放級別結束時觸發觸發此事件。
addoverlay  {type, target}  當使用Map.addOverlay()方法向地圖中新增單個覆蓋物時會觸發此事件。
addcontrol  {type, target}  當使用Map.addControl()方法向地圖中新增單個控制元件時會觸發此事件。
removecontrol   {type, target}  當使用Map.removeControl()方法移除單個控制元件時會觸發此事件。
removeoverlay   {type, target}  當使用Map.removeOverlay()方法移除單個覆蓋物時會觸發此事件。
clearoverlays   {type, target}  當使用Map.clearOverlays()方法一次性移除全部覆蓋物時會觸發此事件。
dragstart   {type, target, pixel, point}    開始拖拽地圖時觸發。
dragging    {type, target, pixel, point}    拖拽地圖過程中觸發。
dragend {type, target, pixel, point}    停止拖拽地圖時觸發。
addtilelayer    {type, target}  新增一個自定義地圖圖層時觸發此事件。
removetilelayer {type, target}  移除一個自定義地圖圖層時觸發此事件。
load    {type, target, pixel, point, zoom}  呼叫Map.centerAndZoom()方法時會觸發此事件。這表示位置、縮放層級已經確定，但可能還在載入地圖圖塊。
resize  {type, target, size}    地圖可視區域大小發生變化時會觸發此事件。
hotspotclick    {type, target, hotspots}    點選熱區時觸發此事件。(自 1.2 新增)
hotspotover {type, target, hotspots}    滑鼠移至熱區時觸發此事件。(自 1.2 新增)
hotspotout  {type, target, hotspots}    滑鼠移出熱區時觸發此事件。(自 1.2 新增)
tilesloaded {type, target}  當地圖所有圖塊完成載入時觸發此事件。(自 1.2 新增)
touchstart  {type, target, point,pixel} 觸控開始時觸發此事件，僅適用移動裝置。(自 1.5新增)
touchmove   {type, target, point,pixel} 觸控移動時觸發此事件，僅適用移動裝置。(自 1.5新增)
touchend    {type, target, point,pixel} 觸控結束時觸發此事件，僅適用移動裝置。(自 1.5新增)
longpress   {type, target, point,pixel} 長按事件，僅適用移動裝置。(自 1.5新增)

以上的引數指在操作事件之後可以獲取到的引數，傳給function(e)的e物件，可以通過e.params來取，比如輸出單擊的經度：

map.addEventListener("click",function(e){
alert(e.point.lng);
});

4. 新增控制元件方法

沒有返回值，控制元件只能新增一次，刪除不存在的控制元件不起作用。

addControl(control:Control);
removeControl(control:Control);

比如新增2D,3D衛星地圖型別控制元件：

map.addControl(new BMap.MapTypeControl());

新增和刪除右下角縮圖（小地圖）控制元件：

var c = new BMap.OverviewMapControl() ;
map.addControl(c);  
map.removeControl(c);

設定特定的控制元件的型別：

var opts1={ type:BMAP_MAPTYPE_CONTROL_MAP }
map.addControl(new BMap.MapTypeControl(opts1));

還有其他控制元件或型別：

Control ScaleControlOptions 
ControlAnchor   OverviewMapControl  LengthUnit  MapTypeControl
NavigationControl   CopyrightControl（版權控制元件）  
NavigationControlType   ScaleControl（比例尺控制元件） Copyright   MapTypeControlType（控制元件樣式型別）
GeolocationControl（定位控制元件）    StatusCode  PanoramaControl（看全景控制元件）

5.簡單覆蓋物overlay

新增點覆蓋物：

//建立點覆蓋物
var marker=new BMap.Marker(new BMap.Point(116, 39));     
var option5={
width:250,        //資訊視窗的寬度
height:100,       //資訊視窗的高度
title:"北京"     //資訊視窗的標題
}
//建立資訊視窗
var infoWindow=new BMap.InfoWindow("天安門",option5);
//監聽標註事件：
marker.addEventListener("mouseover",function(){
  map.openInfoWindow(infoWindow,this.getPosition());
});
marker.addEventListener("mouseout",function(){
  infoWindow.close();
});
map.addOverlay(marker);               //新增點覆蓋物

6. 右鍵選單

地圖上右鍵顯示右鍵選單

map.addEventListener("rightclick",function(e){

var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('選單項一',alertHello));

map.addContextMenu(markerMenu);//給標記新增右鍵選單
} );

var alertHello= function(){
alert("你好");
};

7. 修改地圖狀態方法

設定中心位置，移動地圖，設定級別等操作：

panTo(center:Point[, opts:PanOptions])  none    將地圖的中心點更改為給定的點。如果該點在當前的地圖檢視中已經可見，則會以平滑動畫的方式移動到中心點位置。可以通過配置強制移動過程不使用動畫效果。
panBy(x:Number, y:Number[, opts: PanOptions])   none    將地圖在水平位置上移動x畫素，垂直位置上移動y畫素。如果指定的畫素大於可視區域範圍或者在配置中指定沒有動畫效果，則不執行滑動效果。
reset() none    重新設定地圖，恢復地圖初始化時的中心點和級別。
setCenter(center:Point|String)  none    設定地圖中心點。center除了可以為座標點以外，還支援城市名。注：使用城市名進行設定時該方法是非同步執行，使用座標點設定時該方法不是非同步執行。
setCurrentCity(city:String) none    設定地圖城市，注意當地圖初始化時的型別設定為BMAP_PERSPECTIVE_MAP時，需要在呼叫centerAndZoom之前呼叫此方法設定地圖所在城市。例如：
var map = new BMap.Map(“container”, {mapType: BMAP_PERSPECTIVE_MAP}); map.setCurrentCity(“北京市”); map.centerAndZoom(new BMap.Point(116.404, 39.915), 18); 注意：初始化的座標應與您設定的城市對應，否則地圖將無法正常顯示。如果地圖初始化為BMAP_NORMAL_MAP型別，則在呼叫setMapType切換地圖型別時也要呼叫此方法。(自 1.1 新增)
setMapType(mapType:MapTypes)    none    設定地圖型別。注意，當設定地圖型別為BMAP_PERSPECTIVE_MAP時，需要呼叫map.setCurrentCity方法設定城市。(自 1.1 新增)
setViewport(view:Array<Point>|Viewport[, viewportOptions: ViewportOptions]) none    根據提供的地理區域或座標設定地圖視野，調整後的視野會保證包含提供的地理區域或座標。(自 1.1 新增)
setZoom(zoom:Number)    none    將檢視切換到指定的縮放等級，中心點座標不變。注意：當有資訊視窗在地圖上開啟時，地圖縮放將保證資訊視窗所在的座標位置不動。（自1.2新增）
highResolutionEnabled() Boolean 是否使用高解析度底圖。僅當mapOptions.enableHighResolution屬性為true且裝置支援高解析度時返回true。
zoomIn()    none    放大一級檢視。
zoomOut()   none    縮小一級檢視。
addHotspot(hotspot:Hotspot) none    為地圖新增熱區。(自 1.2 新增)
removeHotspot(hotspot:Hotspot)  none    移除某個地圖熱區。(自 1.2 新增)
clearHotspots() none    清空地圖所有熱區。(自 1.2 新增)

以上的方法是複製網上百度地圖開方平臺的，僅供學習。