1.入门程序
（1）引入baidu地图的javascrpt文件（http路径访问百度地图api官网）
<script src="http://api.map.baidu.com/api?v=2.0&ak=密钥" type="text/javascript"></script>
密钥要到百度地图开发平台网站:http://lbsyun.baidu.com/index.php 去申请（2）编写html代码（百度地图会根据id设定div中的内容）：
<div id=" myMap " style="500px;height:320px"></div>（3）调用api初始化地图
//根据div的id= map的map构建地图内存对象。
//BMap是百度地图类，封装了显示百度地图的方法和属性，参数为容器所对应的id
var map = new BMap.Map("myMap");
map.enableScrollWheelZoom();//启用滚轮放大缩小缩放等级介绍图:
缩放等级介绍图
（4）构建在地图上要显示的区域中心点位置121.491, 31.233可以理解为横坐标和纵坐标，即经度纬度
var point = new BMap.Point(121.491, 31.233);
// 显示地图，并设定地图等级
map.centerAndZoom(point, 3); //缩放等级
2.控件：
百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过Control类来实现自定义控件。
a.地图API中提供的控件：
- Control：所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
- NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
- OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
- MapTypeControl：地图类型控件，默认位于地图右上方。
- CopyrightControl：版权控件，默认位于地图左下方。
- GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方
b.引入控件：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
下面添加个定位控件，由于只带图标太丑，我们自己引用个图标，放进去发方法如下：var locIcon = new BMap.Icon("images/location.png", new BMap.Size(45,45)); var geolocationControl = new BMap.GeolocationControl( { offset:new BMap.Size(20,100), //定位控件偏移量，第一个横坐标，第二个纵坐标 showAddressBar:false, //是否显示城市地址 enableAutoLocation:true, //是否自动定位 locationIcon:locIcon //自定义定位图标 }); map.addControl(geolocationControl); //添加定位控件
c.删除控件：
删除控件:map.removeControl(control);d.修改控件：
| 构造函数 | 描述 |
|---|---|
| setAnchor(anchor:enum ControlAnchor) | 设置控件停靠的位置 |
| getAnchor | 返回控件停靠的位置 |
其中setAnchor()方法的anchor允许的值为：
- BMAP_ANCHOR_TOP_LEFT表示控件定位于地图的左上角。
- BMAP_ANCHOR_TOP_RIGHT表示控件定位于地图的右上角。
- BMAP_ANCHOR_BOTTOM_LEFT表示控件定位于地图的左下角。
- BMAP_ANCHOR_BOTTOM_RIGHT表示控件定位于地图的右下角。
3.覆盖物：
a.简介
覆盖物：所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
地图API提供了如下几种覆盖物：
- Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
- Marker：标注表示地图上的点，可自定义标注的图标。
- Label：表示地图上的文本标注，您可以自定义标注的文本内容。
- Polyline：表示地图上的折线。
- Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
- Circle:表示地图上的圆。
- InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。
- 标注：标注表示地图上的点。API提供了默认图标样式
b.创建标注
var map = new BMap.Map(“map");
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); //创建标注
map.addOverlay(marker); //将标注添加到地图中c.注册事件
marker.addEventListener("click",function(){
alert("点击事件");
});d.可拖拽标注
marker.enableDragging();
marker.addEventListener("dragend",function(e){
alert("当前位置：" +e.point.lng + ", " + e.point.lat);
})e.删除标注（删除其他覆盖物调用同样的方法）
map.removeOverlay(marker);f.信息窗口：
信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态
打开窗口：
var opts = {
250, //信息窗口宽度
height:100, //信息窗口高度
title: "Hello" //信息窗口标题
}
var infoWindow = new BMap.InfoWindow("<input type = 'button' value='按钮'>", opts); //创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); //打开信息窗口g.隐藏与显示
marker.hide(); // 隐藏覆盖物
Marker.show(); // 显示覆盖