# bmap-libs

**Repository Path**: happychl/bmap-libs

## Basic Information

- **Project Name**: bmap-libs
- **Description**: 百度地图插件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-03-07
- **Last Updated**: 2023-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bmap-libs

> 百度地图插件

## 使用说明

### 安装

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

### 使用

```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

### 示例

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

### 参数

| 参数    | 类型   | 描述                    |
| ------- | ------ | ----------------------- |
| 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

### 示例

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

### 参数

| 参数    | 类型                | 描述                    |
| ------- | ------------------- | ----------------------- |
| 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

### 示例

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

### 参数

| 参数    | 类型                | 描述                    |
| ------- | ------------------- | ----------------------- |
| 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       |