百度地图API_BMap接口的使用形式

想要在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  MapTypeControlNavigationControl   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 新增)

以上的方法是复制网上百度地图开方平台的，仅供学习。