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