bmap-libs

> 百度地图插件

使用说明

$3

``bash
npm install bmap-libs


OR


yarn add bmap-libs
`

$3

`js
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() 来移除图层！！！正确的移除方法如下：

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

MultiPolyline

$3

`js
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);
`

$3

| 参数 | 类型 | 描述 |
| ------- | ------ | ----------------------- |
| 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()返回值） |

$3

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

Marker

$3

`js
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);
`

$3

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

#### options

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

$3

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

Popup

$3

`js
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);
``

$3

| 参数 | 类型 | 描述 |
| ------- | ------------------- | ----------------------- |
| 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' | 添加到的面板 |

$3

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