bmap-vue

bmap-vue

封装的百度地图vue组件

使用说明

安装

npm install bmap-vue
# OR
yarn add bmap-vue

使用

// 导入组件
import BdMap from 'bmap-vue';

// 模板中使用
<bd-map :options="options" @loaded="mapLoaded" />;

// 全局挂载（按需添加）
Vue.use(BdMap);

参数

options

属性	类型	默认值	描述
ak	String		百度地图ak
lng	String|Number	116.39167	中心点经度
lat	String|Number	39.90333	中心点维度
zoom	Number	10	初始缩放级别
minZoom	Number	5	最小缩放级别
maxZoom	Number	18	最大缩放级别
style	String|Object		地图样式，支持styleId字符串或styleJson对象
disableControl	Boolean	false	是否禁用地图控件
useTilesLoaded	Boolean	false	使用瓦片加载完成事件（瓦片加载完再显示地图，可避免白屏闪烁）
enableVgl	Boolean	false	是否开启mapvgl功能
enableCluster	Boolean	false	是否开启地图聚合功能
extra	Object		额外的初始化配置

事件

名称	参数	备注
loaded	map	地图加载完成回调，参数为地图实例

实例方法

名称	返回值	备注
parsePoint(<Array|Point>point)	Point	将经纬度数组[lng, lat]转换为百度Point点位
setReset(<Array|Point>center, <Number>zoom)		设置重置点（地图reset控件重置的点位）
viewportReset()		视窗重置（比自带的reset方法更精准）
setCenterAndZoom(<Array|Point>center, <Number>zoom, <Boolean>animation = false)		设置地图中心点和缩放，animation为是否启用动效，默认不启用
setMapStyle(<String|Object>style)		设置地图样式，支持styleId字符串或styleJson对象
openSatelliteLayer(<Number>type)		开启卫星图层，1：自定义卫星图层，2：百度地球，3：百度卫星图，默认值为 1
closeSatelliteLayer()		关闭卫星图层
removeOverlays(<Overlay>overlay,[...])		批量移除地图覆盖物

其他

1. 地图实例支持所有百度地图原生api；
2. 已启用并自动挂载bmap-libs插件；