<!DOCTYPE html>
<html lang="en">
<head>
<!-- 下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html{
height:100%;
}
body{
height:100%;
margin:0px;
padding:0px;
}
/*注意这里如果不设置容器的样式无法显示出来*/
#container{
height: 100%
}
</style>
<!-- 引用百度地图API文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=btAZ21QoB2Tov4yFzAAcutTZd45ZbQ3j">
</script>
</head>
<body>
<!-- 创建地图容器元素 -->
<div id="container"></div>
<script>
// 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
var map = new BMap.Map("container");
// 设置中心点坐标 坐标设置为自己坐标也可以设置其他坐标
var point = new BMap.Point(114.410968,30.482142);
// 地图初始化，同时设置地图展示级别
map.centerAndZoom(point, 15);
// 至此，我们就快速创建了一张以自己的位置为中心的地图~
// 开启鼠标滚轮缩放
//地图的鼠标滚轮缩放默认是关闭的，需要配置开启。
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//这里添加一些控件
//控件还有一些控件的控制属性
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
</script>
</body>
</html>
这些是一个简单的事例页面只能显示地图和鼠标滚动缩进 还有可以添加一些地图移动控件，设置控件的位置如下。