地图容器

BaiduMap 百度地图容器,用于挂载百度地图核心类和一个百度地图实例。是所有地图组件的根组件。
地图容器的实质是一个空的 DOM 节点,它可以用于挂载 BmScale 组件或其它 DOM 节点或组件。如果你需要二次开发或手动控制其子组件,可以使用在 ready 事件中使用返回的 BMap 类和 map 实例进行手动控制。

实例属性

属性名类型默认值描述
akString百度地图开发者平台申请的密钥,仅在局部注册组件时声明。
centerPoint定位, 可使用如“广州市海珠区”的地区字符串,也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
zoomNumber缩放等级
min-zoomNumber最小缩放级别
max-zoomNumber最大缩放级别
high-resolutionBooleantrue高分屏模式 该项仅在地图组件挂载时加载一次
map-clickBooleantrue允许点击 该项仅在地图组件挂载时加载一次
map-typeStringglobal.BMAP_NORMAL_MAP地图类型
draggingBooleantrue允许拖拽
scroll-wheel-zoomBooleanfalse允许鼠标滚轮缩放
double-click-zoomBooleantrue允许双击缩放
keyboardBooleantrue允许键盘操作
inertial-draggingBooleanfalse允许惯性拖拽
continuous-zoomBooleanfalse允许无级缩放
pinch-to-zoomBooleantrue允许双指缩放
auto-resizeBooleantrue允许自适应容器尺寸
mapStyleMapStyle自定义地图样式主题
themeArray自定义主题,是 mapStyle.styleJson 属性的别名,可能会在下一个主版本中 移除 ,不推荐使用
hasAnimationBooleantrueWebGL地图是否有动画效果(为false可以通过animationed事件拿到map对象)
defaultAnimationBooleantrueWebGL是否使用默认动画效果(为false时动画效果很快,可以通过animationed事件拿到map对象)
preserveDrawingBufferBooleanfalse获取地图截图需要设置为true,地球模式不支持。否则是黑屏

事件

事件名参数描述
click{type, target, point, pixel, overlay}左键单击地图时触发此事件。 当双击时,产生的事件序列为: click click dblclick
dblclick{type, target, pixel, point}鼠标双击地图时会触发此事件
rightclick{type, target, point, pixel, overlay}右键单击地图时触发此事件。 当双击时,产生的事件序列为: rightclick rightclick rightdblclick
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}移除一个自定义地图图层时触发此事件
init{BMap,map}初始化完成,地图可能未加载
load{type, target, pixel, point, zoom}调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定,但可能还在载入地图图块
loaded{BMap,map}同load
resize{type, target, size}地图可视区域大小发生变化时会触发此事件
hotspotclick{type, target, spots}点击热区时触发此事件
hotspotover{type, target, spots}鼠标移至热区时触发此事件
hotspotout{type, target, spots}鼠标移出热区时触发此事件
tilesloaded{type, target}当地图所有图块完成加载时触发此事件
ready{BMap,map}同tilesloaded
touchstart{type, target, point,pixel}触摸开始时触发此事件,仅适用移动设备
touchmove{type, target, point,pixel}触摸移动时触发此事件,仅适用移动设备
touchend{type, target, point,pixel}触摸结束时触发此事件,仅适用移动设备
longpress{type, target, point,pixel}长按事件,仅适用移动设备
animationed{BMap,map}WebGL地图当hasAnimation或defaultAnimation为false抛出动画结束事件

地图事件点坐标坑

WebGl地图事件点坐标是latlng,Api事件点坐标是point

自定义主题

百度地图实例允许用户设置自定义配色风格以配合不同风格的主题设计。

主题数据格式请参考:百度地图主题编辑器

示例

设置经纬度和缩放等级

开启滚轮缩放

设置自定义主题

代码(api3.0和webGl使用的是setMapStyleV2,api2.0使用的是setMapStyle)

设置地图类型

代码