Marker
构造函数
创建一个图像标注实例
参数 类型 说明 pointPoint标注所在的地理位置 opts可选MarkerOptions可选参数 属性 类型 说明 anchorControlAnchor标注锚点位置，设置后覆盖 Icon 自身的 anchor autoFollowHeadingChangedboolean是否自动跟随地图旋转角度联动 draggingCursorstring拖拽标注时的鼠标指针样式，需遵循 CSS cursor 属性规范 enableClickingboolean是否响应点击事件 enableDraggingboolean是否启用拖拽 enableMassClearboolean是否在调用 map.clearOverlays() 时清除此覆盖物 iconIcon标注所用的图标对象 isTopboolean是否将标注置于其他标注之上。默认情况下纬度低的标注会盖住纬度高的标注 labelLabel标注所用的文本对象 offsetSize标注的位置偏移值 raiseOnDragboolean拖拽标注时，标注是否开启离开地图表面效果 restrictDraggingAreaboolean是否限制拖拽区域 rotationnumber旋转角度，单位度 startAnimationstring图标的入场动画名称 titlestring鼠标移到标注上时显示的标题文字 zIndexnumber标注的层叠顺序值 返回值 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);
方法
- #addEventListener<K extends keyof MarkerEventMap>(
event: K,
handler: (e: MarkerEventMap[K]) => void,
): void添加事件监听函数
参数 类型 说明 eventK事件名称 handler(e: MarkerEventMap[K]) => void事件处理函数 返回值 void
示例代码1：点击标注
marker.addEventListener('click', (e) => {
console.log(e.type, e.target, e.pixel, e.latLng);
});示例代码2：拖拽标注
marker.enableDragging();
marker.addEventListener('dragend', (e) => {
console.log('拖拽结束', e.pixel);
});
关闭已打开的地点信息窗口
返回值 void
关闭标注拖拽功能
返回值 void
禁止覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
dispose
- dispose(): void
析构方法，当确定覆盖物被移除后不再使用时，可显式调用此方法以降低内存使用
返回值 void
draw
- draw(): void
抽象生命周期方法，当地图状态发生变化时调用，对覆盖物进行绘制。
仅在自定义覆盖物时需要实现此方法。内置覆盖物已在内部实现，用户无需调用也无需重写。
返回值 void
开启标注拖拽功能
返回值 void
允许覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
返回标注的锚点位置
返回值 ControlAnchor
返回标注所用的图标对象
返回值 Icon
返回标注关联的文本标注
返回值 Label
返回覆盖物所在的地图实例
返回值 Map
返回标注的偏移值
返回值 Size
返回标注的地理坐标
返回值 Point
获取标注的重要性权重
返回值 number
获取标注的旋转角度
返回值 number
返回标注的标题
返回值 string
hide
- hide(): void
隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none
返回值 void
initialize
抽象生命周期方法，用于初始化覆盖物，当调用map.addOverlay时，API内部将调用此方法。
仅在自定义覆盖物时需要实现此方法，并返回覆盖物对应的HTML元素。 内置覆盖物（
Marker、Polyline、Polygon等）已在内部实现，用户无需调用也无需重写。参数 类型 说明 mapMap返回值 HTMLElement
示例代码3
class MyOverlay extends BMap.Overlay {
initialize(map: BMap.Map) {
const div = document.createElement('div');
div.textContent = '自定义覆盖物';
map.getPanes().markerPane.appendChild(div);
return div;
}
draw() {}
}
is
- isVisible(): boolean
判断覆盖物是否可见
返回值 boolean
打开地点详情窗口
参数 类型 说明 placeDetailPlaceDetailPlaceDetail 实例 返回值 void
示例代码1
const placeDetail = new BMap.PlaceDetail(document.createElement('div'));
placeDetail.setData('06d2dffda107b0ef89f15db6');
marker.openPlaceDetail(placeDetail);
- #removeEventListener<K extends keyof MarkerEventMap>(
event: K,
handler: (e: MarkerEventMap[K]) => void,
): void移除事件监听函数
参数 类型 说明 eventK事件名称 handler(e: MarkerEventMap[K]) => void事件处理函数 返回值 void
示例代码4
const handler = (e: BMap.OverlayMouseEvent<BMap.Marker>) => { console.log(e); };
marker.addEventListener('click', handler);
marker.removeEventListener('click', handler);
设置标注的锚点位置，会覆盖 Icon 自身的 anchor 设置
参数 类型 说明 anchorControlAnchor锚点枚举值 返回值 void
示例代码1
marker.setAnchor(BMAP_ANCHOR_BOTTOM_CENTER);
设置标注所用的图标对象
参数 类型 说明 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);
设置标注的属性选项
参数 类型 说明 optionsMarkerOptions标注属性 属性 类型 说明 anchorControlAnchor标注锚点位置，设置后覆盖 Icon 自身的 anchor autoFollowHeadingChangedboolean是否自动跟随地图旋转角度联动 draggingCursorstring拖拽标注时的鼠标指针样式，需遵循 CSS cursor 属性规范 enableClickingboolean是否响应点击事件 enableDraggingboolean是否启用拖拽 enableMassClearboolean是否在调用 map.clearOverlays() 时清除此覆盖物 iconIcon标注所用的图标对象 isTopboolean是否将标注置于其他标注之上。默认情况下纬度低的标注会盖住纬度高的标注 labelLabel标注所用的文本对象 offsetSize标注的位置偏移值 raiseOnDragboolean拖拽标注时，标注是否开启离开地图表面效果 restrictDraggingAreaboolean是否限制拖拽区域 rotationnumber旋转角度，单位度 startAnimationstring图标的入场动画名称 titlestring鼠标移到标注上时显示的标题文字 zIndexnumber标注的层叠顺序值 返回值 void
设置标注的地理坐标
参数 类型 说明 positionPoint新的地理坐标 返回值 void
示例代码1
marker.setPosition(new BMap.Point(116.410, 39.920));
设置标注的重要性权重。当开启避让检测且多个标注相互叠加时，权重小的标注将被隐藏
参数 类型 说明 ranknumber权重值，数值越高，权重越高 返回值 void
设置标注的旋转角度
参数 类型 说明 rotationnumber旋转角度，单位度 返回值 void
示例代码1
marker.setRotation(45);
设置标注的旋转原点角度
参数 类型 说明 anglenumber正北方向顺时针旋转角度，取值范围 [0, 360] 返回值 void
设置标注的标题，当鼠标移至标注上时显示此标题
参数 类型 说明 titlestring标题文字 返回值 void
示例代码1
marker.setTitle('天安门');
设置覆盖物的 zIndex
参数 类型 说明 zIndexnumber层叠顺序值 返回值 void
示例代码1
marker.setZIndex(999);
show
- show(): void
显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空
返回值 void
此类表示地图上的一个图像标注。