html调用百度地图api

具体代码

 

如果引入简单地图，将以上代码复制即可。

2，步骤分解

1，想要在HTML中加载百度地图，使用js形式，先去申请个秘钥

2，创建一个map地图实例，放进div中：

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（看全景控件）

 百度地图开放平台：http://lbsyun.baidu.com/index.php?title=jspopular