具体代码
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>百度地图API</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(104.081592,30.655831);//定义一个中心点坐标
map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
initMap();//创建和初始化地图
</script>
</html>
如果引入简单地图，将以上代码复制即可。
2，步骤分解
1，想要在HTML中加载百度地图，使用js形式，先去申请个秘钥
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
2，创建一个map地图实例，放进div中：
<div id="example">
var map1=new Bmap.map("example");
3,创建地图起始点和显示级别(此例地图放大级别是11）:
map1.centerAndZoom(new Bmap.point(120,30),11)
4.设置当前城市：
map.setCurrentCity("广州")
5，对地图拖拽，缩放等进行配置，直接调用内置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 启用地图惯性拖拽
disableInertialDragging() none 禁用地图惯性拖拽。
enableContinuousZoom() none 启用连续缩放效果
disableContinuousZoom() none 禁用连续缩放效果。
enablePinchToZoom() none 启用双指操作缩放
disablePinchToZoom() none 禁用双指操作缩放
enableAutoResize() none 启用自动适应容器尺寸变化
disableAutoResize() none 禁用自动适应容器尺寸变化。
setDefaultCursor(cursor:String) none 设置地图默认的鼠标指针样式。参数cursor应符合CSS的cursor属性规范
getDefaultCursor() String 返回地图默认的鼠标指针样式。
setDraggingCursor(cursor:String) none 设置拖拽地图时的鼠标指针样式。参数cursor应符合CSS的cursor属性规范。
getDraggingCursor() String 返回拖拽地图时的鼠标指针样式
setMinZoom(zoom:Number) none 设置地图允许的最小级别。取值不得小于地图类型所允许的最小级别。
setMaxZoom(zoom:Number) none 设置地图允许的最大级别。取值不得大于地图类型所允许的最大级别。
6，添加事件监听：
map.addEventListener("operate",function(e){doSomething})
事件类型：
click {type, target, point, pixel, overlay} 左键单击地图时触发此事件。
dblclick {type, target, pixel, point} 鼠标双击
rightclick {type, target, point, pixel, overlay} 右键单击
rightdblclick {type, target, point, pixel, overlay} 右键双击
maptypechange {type, target} 地图类型发生变化时。
mousemove {type, target, point, pixel, overlay} 鼠标在地图区域移动过程中
mouseover {type, target} 鼠标移入地图区域时
mouseout {type, target} 鼠标移出地图区域时
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} 点击热区时
hotspotover {type, target, hotspots} 鼠标移至热区时
hotspotout {type, target, hotspots} 鼠标移出热区时
tilesloaded {type, target} 当地图所有图块完成加载时
touchstart {type, target, point,pixel} 触摸开始时，仅适用移动设备
touchmove {type, target, point,pixel} 触摸移动，仅适用移动设备
touchend {type, target, point,pixel} 触摸结束时】，仅适用移动设备
longpress {type, target, point,pixel} 长按事件，仅适用移动设备。
以上的参数指在操作事件之后可以获取到的参数，传给function(e)的e对象，可以通过e.params来取，比如输出单击的经度：
map.addEventListener("click",function(e){
alert(e.point.lng);
});添加控件：
比如添加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（看全景控件）