1注册百度账号，在页面申请密钥(AK)
申请百度账号和ak。应用名称可以自己随便取一个名字，只要符合其命名规范即可。应用类型需要选择浏览器端。由于是本地自己使用，我就将白名单设为*。点击提交去激活。激活成功后就会获得相关的ak。
image.png
http://lbsyun.baidu.com/apiconsole/key?application=key
2页面引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
3地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。
<body>
<div id = "container"></div>
</body>
4设置地图中心点
这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
var point = new BMap.Point(116.404, 39.915);
5地图初始化，同时设置地图展示级别
在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
map.centerAndZoom(point, 15);
//百度地图API功能
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根据坐标初始化地图
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl()); //平移缩放控件
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl()); //缩略地图 map.addControl(new BMap.MapTypeControl()); //地图类型
map.setCurrentCity("杭州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
//添加标注
var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756)); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
</script>
至此，地图已经可以显示了。
image.png
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- baidu map -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
</head>
<body>
<div id = "container"></div>
</body>
</html>
<script type="text/javascript">
//百度地图API功能
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根据坐标初始化地图
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl()); //平移缩放控件
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl()); //缩略地图
map.addControl(new BMap.MapTypeControl()); //地图类型
map.setCurrentCity("郑州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
//添加标注
var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756)); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
</script>
