Marker

定义于: src/ui/marker.ts:32

Marker是一个可以被添加到地图上的HTML元素；它可以是一个DOM元素，或者作为一个SVG标记路径的字符串，或者是一个HTMLImageElement；带有CSS自定义属性--marker-color，默认为#3FB1CE；可以通过使用.maplibregl-marker类来为其设置样式；如需正确显示不需要定位的标记，该元素需要包含属性viewBox、width和height；

示例

// 创建一个标记
const marker = new Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);

// 设置标记颜色
marker.getElement().style.setProperty('--marker-color', '#FF0000');

参见

• 使用标记添加自定义图标
• 创建可拖动的标记

事件

事件 当标记被拖动时，将触发类型为Event的dragstart事件；

事件 当标记被拖动时，将触发类型为Event的drag事件；

事件 当标记拖动结束时，将触发类型为Event的dragend事件；

继承

• Evented

构造函数

构造函数

new Marker(options?: MarkerOptions): Marker

定义于: src/ui/marker.ts:140

参数

返回

Marker

覆盖

Evented.constructor

方法

addClassName()

addClassName(className: string): void

定义于: src/ui/marker.ts:672

向标记元素添加CSS类；

参数

返回

void

示例

let marker = new Marker()
marker.addClassName('some-class')

addTo()

addTo(map: Map): this

定义于: src/ui/marker.ts:338

将标记添加到地图；

参数

返回

this

示例

let marker = new Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map); // 添加标记到地图

getElement()

getElement(): HTMLElement

定义于: src/ui/marker.ts:419

返回标记的HTML元素；

返回

HTMLElement

标记的HTML元素

示例

// 将默认的标记颜色改为黄色
const marker = new Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);
marker.getElement().style.setProperty('--marker-color', '#FFFF00');

getLngLat()

getLngLat(): LngLat

定义于: src/ui/marker.ts:498

返回标记的地理位置；

返回

LngLat

标记的地理位置；

getOffset()

getOffset(): Point

定义于: src/ui/marker.ts:664

返回标记的偏移量；

返回

Point

标记的偏移量（以像素为单位）；

getPitchAlignment()

getPitchAlignment(): Alignment

定义于: src/ui/marker.ts:845

返回标记的俯仰对齐方式；

返回

Alignment

标记的俯仰对齐方式；

getPopup()

getPopup(): Popup

定义于: src/ui/marker.ts:558

返回绑定到此标记的弹出窗口实例；

返回

Popup

返回绑定到此标记的弹出窗口实例；

示例

let marker = new Marker()
  .setLngLat([0, 0])
  .setPopup(new Popup().setHTML("<h1>Hello World!</h1>"))
  .addTo(map);

marker.getPopup(); // 返回附加到标记的弹出窗口实例

getRotation()

getRotation(): number

定义于: src/ui/marker.ts:809

返回标记的旋转角度；

返回

number

标记的旋转角度（顺时针，以度为单位）；

getRotationAlignment()

getRotationAlignment(): Alignment

定义于: src/ui/marker.ts:827

返回标记的旋转对齐方式；

返回

Alignment

标记的旋转对齐方式；

isDraggable()

isDraggable(): boolean

定义于: src/ui/marker.ts:781

指示此标记是否可拖动；

返回

boolean

如果此标记是可拖动的，则为true；

listens()

listens(type: string): boolean

定义于: src/util/evented.ts:165

如果这个Evented实例或任何转发的Evented实例对指定类型有监听器，则返回true；

参数

返回

boolean

如果指定的事件类型至少有一个注册的监听器，则为true，否则为false；

继承自

Evented.listens

off()

off(type: string, listener: Listener): Marker

定义于: src/util/evented.ts:90

移除先前注册的事件监听器；

参数

返回

Marker

继承自

Evented.off

on()

on(type: string, listener: Listener): Subscription

定义于: src/util/evented.ts:73

为指定的事件类型添加监听器；

参数

返回

Subscription

继承自

Evented.on

once()

once(type: string, listener?: Listener): Promise<any> | Marker

定义于: src/util/evented.ts:106

添加一个只会被调用一次的监听器到指定的事件类型；

在注册监听器后，首次触发事件时将调用该监听器；

参数

返回

Promise<any> | Marker

如果未提供监听器，则返回this或Promise；

继承自

Evented.once

remove()

remove(): this

定义于: src/ui/marker.ts:348

从地图中移除标记；

返回

this

示例

let marker = new Marker().addTo(map);
marker.remove();

removeClassName()

removeClassName(className: string): void

定义于: src/ui/marker.ts:683

从标记元素中移除CSS类；

参数

返回

void

示例

let marker = new Marker()
marker.removeClassName('some-class')

setDraggable()

setDraggable(shouldBeDraggable?: boolean): this

定义于: src/ui/marker.ts:770

设置标记的draggable属性和功能；

参数

返回

this

setEventedParent()

setEventedParent(parent?: Evented, data?: any): Marker

定义于: src/util/evented.ts:176

将此Evented实例触发的所有事件冒泡到此Evented的父实例；

参数

返回

Marker

继承自

Evented.setEventedParent

setLngLat()

setLngLat(lnglat: LngLatLike): this

定义于: src/ui/marker.ts:406

设置标记的地理位置并移动它；

参数

返回

this

示例

创建一个新标记，设置经度和纬度，并将其添加到地图上

new Marker()
  .setLngLat([-65.017, -16.457])
  .addTo(map);

参见

• 使用标记添加自定义图标
• 创建可拖动的标记

setOffset()

setOffset(offset: PointLike): this

定义于: src/ui/marker.ts:651

设置标记的偏移量；

参数

返回

this

setOpacity()

setOpacity(opacity?: string, opacityWhenCovered?: string): this

定义于: src/ui/marker.ts:856

设置标记的opacity和opacityWhenCovered属性。当不带参数调用时，将不透明度和覆盖时的不透明度重置为默认值；

参数

返回

this

setPitchAlignment()

setPitchAlignment(alignment?: Alignment): this

定义于: src/ui/marker.ts:836

设置标记的pitchAlignment属性；

参数

返回

this

setPopup()

setPopup(popup?: Popup): this

定义于: src/ui/marker.ts:435

将弹出窗口绑定到标记；

参数

返回

this

示例

let marker = new Marker()
 .setLngLat([0, 0])
 .setPopup(new Popup().setHTML("<h1>Hello World!</h1>")) // 添加弹出窗口
 .addTo(map);

参见

将弹出窗口附加到标记实例

setRotation()

setRotation(rotation?: number): this

定义于: src/ui/marker.ts:800

设置标记的rotation属性；

参数

返回

this

setRotationAlignment()

setRotationAlignment(alignment?: Alignment): this

定义于: src/ui/marker.ts:818

设置标记的rotationAlignment属性；

参数

返回

this

setSubpixelPositioning()

setSubpixelPositioning(value: boolean): Marker

定义于: src/ui/marker.ts:485

通过传递布尔值来设置允许标记进行亚像素定位的选项；

参数

返回

Marker

示例

let marker = new Marker()
marker.setSubpixelPositioning(true);

toggleClassName()

toggleClassName(className: string): boolean

定义于: src/ui/marker.ts:700

根据元素当前是否具有该类，在标记元素上添加或移除给定的CSS类；

参数

返回

boolean

如果类被移除则返回false，如果类被添加则返回true；

示例

let marker = new Marker()
marker.toggleClassName('toggleClass')

togglePopup()

togglePopup(): this

定义于: src/ui/marker.ts:540

根据弹出窗口的当前状态，打开或关闭绑定到标记的弹出窗口实例；

返回

this

示例

let marker = new Marker()
 .setLngLat([0, 0])
 .setPopup(new Popup().setHTML("<h1>Hello World!</h1>"))
 .addTo(map);

marker.togglePopup(); // 切换弹出窗口打开或关闭