Bmap-libs NPM | npm.io

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(\type, \listener)		绑定事件
off(\type, \listener)		解绑事件
isVisible()	Boolean	查看多段线图层可见性
show()		显示多段线图层
hide()		隐藏多段线图层
getZIndex()	Number	获取 zIndex
setZIndex(\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(\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

示例

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(\type, \listener)		绑定事件
off(\type, \listener)		解绑事件
isVisible()	Boolean	查看 popup 可见性
show()		显示 popup
hide()		隐藏 popup
update()		更新 popup
setPoint(\point)		设置坐标点
getZIndex()	Number	获取 zIndex
setZIndex(\zIndex)		设置 zIndex