Marker
构造函数
创建一个图像标注实例
参数 类型 说明 pointPoint标注所在的地理位置 opts可选MarkerOptions可选参数 属性 类型 说明 draggingCursorstring拖拽标注时的鼠标指针样式，需遵循 CSS cursor 属性规范 enableClickingboolean是否响应点击事件 enableDraggingboolean是否启用拖拽 enableMassClearboolean是否在调用 map.clearOverlays() 时清除此覆盖物 iconIcon标注所用的图标对象 offsetSize标注的位置偏移值 raiseOnDragboolean拖拽标注时，标注是否开启离开地图表面效果 rotationnumber旋转角度，单位度 titlestring鼠标移到标注上时显示的标题文字 返回值 Marker
示例代码1
const marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
map.addOverlay(marker);示例代码2：自定义图标
const icon = new BMap.Icon('https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_1.png', new BMap.Size(30, 30));
const marker = new BMap.Marker(new BMap.Point(116.404, 39.915), { icon });
map.addOverlay(marker);
方法
添加事件监听函数
参数 类型 说明 eventstring事件名称 handlerFunction事件处理函数 返回值 void
示例代码1
marker.addEventListener('click', (e) => {
console.log('marker clicked', e);
});
关闭已打开的地点信息窗口
返回值 void
关闭标注拖拽功能
返回值 void
禁止覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
开启标注拖拽功能
返回值 void
允许覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
返回标注所用的图标对象
返回值 Icon
返回标注关联的文本标注
返回值 Label
返回覆盖物所在的地图实例
返回值 Map
返回标注的偏移值
返回值 Size
返回标注的地理坐标
返回值 Point
获取标注的旋转角度
返回值 number
返回标注的标题
返回值 string
打开地点详情窗口
参数 类型 说明 placeDetailPlaceDetailPlaceDetail 实例 返回值 void
示例代码1
const placeDetail = new BMap.PlaceDetail(document.createElement('div'));
placeDetail.setData('06d2dffda107b0ef89f15db6');
marker.openPlaceDetail(placeDetail);
移除事件监听函数
参数 类型 说明 eventstring事件名称 handlerFunction事件处理函数 返回值 void
示例代码1
const handler = (e: any) => { console.log(e); };
marker.addEventListener('click', handler);
marker.removeEventListener('click', handler);
设置标注所用的图标对象
参数 类型 说明 iconIcon图标对象 返回值 void
示例代码1：使用图片 URL
const icon = new BMap.Icon('https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_2.png', new BMap.Size(30, 30));
marker.setIcon(icon);示例代码2：使用 dataURL
// 32x32 红色圆点 PNG
const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAa0lEQVR4nO3O2w0AIAhDUfdfWh3AV6UFY2jg+55ScuBqv9WHhWUQNEyFWOMmBCt+hWDHIYQqfowIBajjW0QowCs+RSQgAQkIB3gihvEnAB6IZfwJgBJxFFchoDgbcRVnIUxxC4QWRiGy8LdrhvjLbe66frcAAAAASUVORK5CYII=';
const icon = new BMap.Icon(dataUrl, new BMap.Size(32, 32));
marker.setIcon(icon);示例代码3：使用 SVG dataURL
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="14" fill="#2563eb" stroke="#fff" stroke-width="2"/>
</svg>`;
const svgUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
const icon = new BMap.Icon(svgUrl, new BMap.Size(32, 32));
marker.setIcon(icon);示例代码4：设置锚点和图片偏移（CSS Sprites）
// 原图是一个均匀九宫格图片，大小为300*300
// 通过imageSize设置其逻辑大小为90*90
// 通过imageOffset设置切图在逻辑大小上的位置起始点，（60，0）对应第一行第三个图标的起始点
// 通过anchor设置图标在地图上显示的锚点，（15，30）以图片底边中心作为锚点
const icon = new BMap.Icon(
'https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_all.png',
new BMap.Size(30, 30),
{ imageOffset: new BMap.Size(60, 0), imageSize: new BMap.Size(90, 90), anchor: new BMap.Size(15, 30) }
);
marker.setIcon(icon);
为标注添加文本标注
参数 类型 说明 labelLabel文本标注对象 返回值 void
示例代码1
const label = new BMap.Label('标注文字', { offset: new BMap.Size(20, -10) });
marker.setLabel(label);
设置标注的地理坐标
参数 类型 说明 positionPoint新的地理坐标 返回值 void
示例代码1
marker.setPosition(new BMap.Point(116.410, 39.920));
设置标注的旋转角度
参数 类型 说明 rotationnumber旋转角度，单位度 返回值 void
示例代码1
marker.setRotation(45);
设置标注的标题，当鼠标移至标注上时显示此标题
参数 类型 说明 titlestring标题文字 返回值 void
示例代码1
marker.setTitle('天安门');
设置覆盖物的 zIndex
参数 类型 说明 zIndexnumber层叠顺序值 返回值 void
示例代码1
marker.setZIndex(999);
此类表示地图上的一个图像标注。