2D · TMapMarker 标记点

2D 文档 · Leaflet 组件

TMapMarker 在父级 TMap 中创建 Marker，支持响应式位置、拖拽、自定义图标和命令式控制。

使用示例

<TMap provider="osm">
  <TMapMarker
    ref="markerRef"
    :position="position"
    title="巡检点"
    draggable
    @move="position = $event.position"
    @dragend="savePosition"
  />
</TMap>

Props

名称	类型	说明
position	TMapPositionInput	必填，Marker 坐标
title	string	鼠标悬停标题
draggable	boolean	是否允许拖拽
icon	Leaflet.Icon | TMapMarkerIconOptions	完整图标实例或配置
iconUrl	string	图标图片快捷入口
iconSize	[number, number]	默认 [32, 40]
iconAnchor	[number, number]	图标锚点
popupAnchor	[number, number]	Popup 偏移
tooltipAnchor	[number, number]	Tooltip 偏移

其他字段会作为 Leaflet MarkerOptions 使用。

事件

dragstart、drag、dragend 与 move 均返回：

interface TMapMarkerEvent {
  position: { lng: number; lat: number };
  originalEvent: unknown;
}

move 会在拖拽过程中持续触发。

暴露方法

markerRef.value?.getPosition();
markerRef.value?.setPosition([116.4, 39.9]);
markerRef.value?.enableDragging();
markerRef.value?.disableDragging();

自定义图片建议先使用 Vite 导入，再传给 icon-url，避免生产构建后相对路径失效。