1.4.1 • Published 5 months ago
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, \zoom) | | 设置重置点（地图reset控件重置的点位） |
| viewportReset() | | 视窗重置（比自带的reset方法更精准） |
| setCenterAndZoom(\<Array|Point>center, \zoom, \animation = false) | | 设置地图中心点和缩放，animation为是否启用动效，默认不启用 |
| setMapStyle(\<String|Object>style) | | 设置地图样式，支持styleId字符串或styleJson对象 |
| openSatelliteLayer() | | 开启卫星图层 |
| closeSatelliteLayer() | | 关闭卫星图层 |
| removeOverlays(\overlay,...) | | 批量移除地图覆盖物 |
其他
- 地图实例支持所有百度地图原生
api； - 已启用并自动挂载
bmap-libs插件；