bmap-libs

百度地图插件

使用说明

安装

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

使用

import bmapLibs from 'bmap-libs';

// 百度地图库加载完毕后初始化
bmapLibs();

// 绘制多段线
const multiPolyline = new BMapGLLib.MultiPolyline(points, options);

// 添加marker
const marker = new BMapGLLib.Marker(point, content, options);

// 添加popup
const popup = new BMapGLLib.Popup(content, options);
// 直接使用
popup.setPoint(point);
// 或者绑定到marker
marker.bindPopup(popup);

注意

不要通过直接调用 overlay.remove() 来移除图层！！！正确的移除方法如下：

// 移除单个图层
map.removeOverlay(overlay);
// 移除全部图层
map.clearOverlays();

MultiPolyline

示例

let multiPoints = [
  [
    '116.27961508447355,40.049453414029834',
    '116.2801675423622,40.04985729053617',
    '116.2798172032133,40.050264616535344',
    '116.28072000025082,40.050461374825595',
    '116.2815823735404,40.05003679043139',
    '116.28114220384052,40.04954661651461',
  ],
  ['116.27966898280415,40.04863529781763', '116.28142067854861,40.04870778952721'],
];
multiPoints = multiPoints.map((points) => points.map((point) => new BMapGL.Point(...point.split(','))));

const multiPolyline = new BMapGLLib.MultiPolyline(multiPoints, { strokeColor: 'red' });
map.addOverlay(multiPolyline);

参数

| 参数 | 类型 | 描述 | | ------- | ------ | ----------------------- | | points | Array | 多段线的 Point 二维数组 | | options | Object | 多段线的配置 |

options

| 属性 | 类型 | 默认值 | 描述 | | ------------- | ------ | ------------ | --------------------------------------------- | | zIndex | Number | 1 | 层级 | | strokeColor | String | 'blue' | 多段线颜色 | | strokeWeight | Number | 2 | 多段线的宽度，以像素为单位 | | strokeOpacity | Number | 1 | 多段线的透明度，取值范围 0 - 1 | | delay | Number | 100 | 防抖延迟，单位毫秒，值为 0 则不开启防抖 | | pane | String | 'markerPane' | 添加到的面板（可选值见 map.getPanes()返回值） |

方法

| 名称 | 返回值 | 备注 | | --------------------------------------- | ------- | -------------------- | | on(<String>type, <Function>listener) | | 绑定事件 | | off(<String>type, <Function>listener) | | 解绑事件 | | isVisible() | Boolean | 查看多段线图层可见性 | | show() | | 显示多段线图层 | | hide() | | 隐藏多段线图层 | | getZIndex() | Number | 获取 zIndex | | setZIndex(<Number>zIndex) | | 设置 zIndex |

Marker

示例

const point = new BMapGL.Point(116.27961508447355, 40.049453414029834);
const div = document.createElement('div');
div.style.width = '40px';
div.style.height = '40px';
div.style.background = 'rgba(0, 0, 255, .5)';

const marker = new BMapGLLib.Marker(point, div, { zIndex: 2, offset: new BMapGL.Size(0, 0) });
marker.on('click', () => {
  console.log('marker click');
});
map.addOverlay(marker);

参数

| 参数 | 类型 | 描述 | | ------- | ------------------- | ----------------------- | | point | Object | 坐标点 | | content | String|HTMLElement | dom 字符串或者 dom 元素 | | options | Object | 配置 |

options

| 属性 | 类型 | 默认值 | 描述 | | --------- | ------ | ------------ | ------------ | | zIndex | Number | 1 | 层级 | | offset | Size | Size(0, 0) | 偏移量 | | className | String | '' | css 类名 | | pane | String | 'markerPane' | 添加到的面板 |

方法

| 名称 | 返回值 | 备注 | | --------------------------------------- | ------- | ------------------- | | on(<String>type, <Function>listener) | | 绑定事件 | | off(<String>type, <Function>listener) | | 解绑事件 | | isVisible() | Boolean | 查看 marker 可见性 | | show() | | 显示 marker | | hide() | | 隐藏 marker | | update() | | 更新 marker | | getZIndex() | Number | 获取 zIndex | | setZIndex(<Number>zIndex) | | 设置 zIndex | | getPosition() | | 返回标注的地理坐标 | | bindPopup(<Popup>popup) | | 绑定 popup | | unbindPopup() | | 解绑 popup | | getPopup() | Popup | 获取 popup | | openPopup() | | 打开 popup | | closePopup() | | 关闭 popup | | isPopupOpen() | Boolean | 查看 popup 是否打开 |

Popup

示例

const point = new BMapGL.Point(116.27961508447355, 40.049453414029834);
const popupEl = document.createElement('div');
popupEl.style.width = '200px';
popupEl.style.height = '120px';
popupEl.style.border = '1px solid black';
popupEl.style.background = 'rgba(255, 255, 255, .5)';

const popup = new BMapGLLib.Popup(popupEl, { offset: new BMapGL.Size(0, -10), visible: true });

// 直接使用
popup.setPoint(point);
map.addOverlay(popup);

// 或者绑定到marker使用
marker.bindPopup(popup);
map.addOverlay(marker);

参数

| 参数 | 类型 | 描述 | | ------- | ------------------- | ----------------------- | | content | String|HTMLElement | dom 字符串或者 dom 元素 | | options | Object | 配置 |

options

| 属性 | 类型 | 默认值 | 描述 | | --------- | ------- | ----------- | ------------ | | zIndex | Number | 1 | 层级 | | offset | Size | Size(0, 0) | 偏移量 | | className | String | '' | css 类名 | | visible | Boolean | true | 初始可见性 | | pane | String | 'labelPane' | 添加到的面板 |

方法

| 名称 | 返回值 | 备注 | | --------------------------------------- | ------- | ----------------- | | on(<String>type, <Function>listener) | | 绑定事件 | | off(<String>type, <Function>listener) | | 解绑事件 | | isVisible() | Boolean | 查看 popup 可见性 | | show() | | 显示 popup | | hide() | | 隐藏 popup | | update() | | 更新 popup | | setPoint(<Point>point) | | 设置坐标点 | | getZIndex() | Number | 获取 zIndex | | setZIndex(<Number>zIndex) | | 设置 zIndex |