组件

覆盖物

标注、折线、多边形、圆形、矩形、文本、点聚合、海量点、信息窗与右键菜单

覆盖物组件写在 <TdtMap> 内部即自动挂载，props 变更经官方 setter 同步，卸载时自动移除。坐标 props 统一接受 [lng, lat] 数组或官方 T.LngLat 实例。

地图加载中…

标注 Marker

<TdtMarker :lnglat="[116.404, 39.915]" draggable title="天安门" />

<tdt-marker lnglat="116.404,39.915" draggable title="天安门"></tdt-marker>

地图加载中…

Prop	类型	说明
`lnglat`	`[number, number] \| LngLat`	坐标（必填）
`icon`	`Icon \| IconOptions`	标注图标（iconUrl/iconSize/iconAnchor）
`draggable`	`boolean`	是否可拖拽
`title`	`string`	鼠标悬停提示
`zIndexOffset`	`number`	层级偏移
`opacity`	`number`	透明度

事件：click dblclick mousedown mouseup mouseover mouseout dragstart drag dragend remove

折线 Polyline / 多边形 Polygon

<TdtPolyline :path="[[116.38, 39.9], [116.42, 39.92]]" color="#2563eb" :weight="4" />
<TdtPolygon :path="[[116.35, 39.86], [116.38, 39.86], [116.38, 39.88]]" fill-color="#16a34a" :fill-opacity="0.35" />

<tdt-polyline path="116.38,39.9;116.42,39.92" color="#2563eb" weight="4"></tdt-polyline>
<tdt-polygon path="116.35,39.86;116.38,39.86;116.38,39.88" fill-color="#16a34a" fill-opacity="0.35"></tdt-polygon>

Prop	适用	说明
`path`	两者	坐标数组（必填）
`color`	两者	线颜色
`weight`	两者	线宽
`opacity`	两者	线透明度
`lineStyle`	两者	`"solid" \| "dashed"`
`fillColor` / `fillOpacity`	Polygon	填充色与填充透明度

事件（两者同）：click dblclick mousedown mouseup mouseover mouseout remove

圆形 Circle / 矩形 Rectangle

<TdtCircle :center="[116.45, 39.87]" :radius="800" fill-color="#dc2626" :fill-opacity="0.3" />
<TdtRectangle :bounds="[[116.33, 39.94], [116.35, 39.96]]" fill-color="#ca8a04" />

<tdt-circle center="116.45,39.87" radius="800" fill-color="#dc2626" fill-opacity="0.3"></tdt-circle>
<tdt-rectangle bounds="116.33,39.94;116.35,39.96" fill-color="#ca8a04"></tdt-rectangle>

Prop	适用	说明
`center`	Circle	圆心坐标（必填）
`radius`	Circle	半径，单位米（必填）
`bounds`	Rectangle	西南角与东北角坐标 `[[swLng, swLat], [neLng, neLat]]`（必填）
`color` `weight` `opacity` `lineStyle`	两者	线样式，同折线
`fillColor` / `fillOpacity`	两者	填充样式

事件同折线。

文本 Label

<TdtLabel text="奥体中心" :lnglat="[116.39, 40.0]" />

<tdt-label text="奥体中心" lnglat="116.39,40.0"></tdt-label>

Prop	类型	说明
`text`	`string`	文本内容（必填）
`lnglat`	`[number, number] \| LngLat`	坐标（必填）
`offset`	`Point`	文本偏移
`fontColor` / `fontSize`	`string` / `number`	字体颜色与大小
`backgroundColor`	`string`	背景色
`title`	`string`	鼠标悬停提示

事件（官方事件表）：click dblclick mousedown mouseup mouseout

点聚合 MarkerCluster

<TdtMarkerCluster :grid-size="60">
  <TdtMarker v-for="m in markers" :key="m.name" :lnglat="m.lnglat" />
</TdtMarkerCluster>

<tdt-marker-clusterer grid-size="60">
  <tdt-marker lnglat="116.35,39.95"></tdt-marker>
  <tdt-marker lnglat="116.36,39.94"></tdt-marker>
</tdt-marker-clusterer>

Prop	类型	说明
`markers`	`Array<Marker \| [number, number]>`	批量传入的待聚合标注
`gridSize`	`number`	聚合计算网格的像素大小，默认 60
`maxZoom`	`number`	大于该级别不进行聚合
`styles`	`MarkerClustererStyle[]`	聚合点样式

子级 <TdtMarker> 写在内部即加入聚合。官方文档未列聚合事件表，个别交互事件经 expose 的 cluster 实例用 addEventListener 命令式挂接。

海量点 CloudMarkerCollection

<TdtCloudMarker :lnglats="points" :styles="{ ShapeType: 'CIRCLE', SizeType: 'SMALL', color: '#7c3aed' }" />

<tdt-cloud-marker
  lnglats="116.3,39.8;116.31,39.81"
  styles='{"ShapeType":"CIRCLE","SizeType":"SMALL","color":"#7c3aed"}'
></tdt-cloud-marker>

Prop	类型	说明
`lnglats`	`Array<[number, number] \| LngLat>`	海量点坐标集合
`styles`	`CloudMarkerCollectionOptions`	绘制样式（ShapeType/SizeType/color）

事件：click mouseover mouseout

信息窗 InfoWindow

嵌套在 <TdtMarker> 内随标注打开，或直接传 lnglat 由地图打开：

<TdtMarker :lnglat="[116.404, 39.915]">
  <TdtInfoWindow v-model:open="open">
    <div>信息窗内容</div>
  </TdtInfoWindow>
</TdtMarker>

<tdt-marker lnglat="116.404,39.915">
  <tdt-info-window open>
    <div>信息窗内容</div>
  </tdt-info-window>
</tdt-marker>

Prop	类型	说明
`open`	`boolean`	开关（支持 `v-model:open`）
`lnglat`	`[number, number] \| LngLat`	未嵌套在标注内时必填，按坐标打开
`minWidth` / `maxWidth` / `maxHeight`	`number`	尺寸约束
`autoPan`	`boolean`	打开时是否自动平移地图
`closeButton`	`boolean`	是否显示关闭按钮
`offset`	`Point`	偏移
`autoPanPadding`	`Point`	自动平移的边距
`closeOnClick`	`boolean`	点击地图时是否关闭

事件：update:open open close clickclose

右键菜单 ContextMenu

<TdtContextMenu>
  <TdtContextMenuItem text="居中到此点" @select="(lnglat) => …" />
</TdtContextMenu>

Prop	说明
`width`	菜单宽度（官方 ContextMenuOptions.width，默认 120）

TdtContextMenu 事件：open close；TdtContextMenuItem 事件：select（菜单在坐标处打开时回调该坐标）。

Web Components

<tdt-map tk="…" center="116.404,39.915" zoom="12">
  <tdt-marker lnglat="116.404,39.915" draggable></tdt-marker>
  <tdt-polyline path="116.38,39.9;116.42,39.92" color="#2563eb" weight="4"></tdt-polyline>
  <tdt-circle center="116.45,39.87" radius="800" fill-color="#dc2626" fill-opacity="0.3"></tdt-circle>
  <tdt-cloud-marker
    lnglats="116.3,39.8;116.31,39.81"
    styles='{"ShapeType":"CIRCLE","SizeType":"SMALL","color":"#7c3aed"}'
  ></tdt-cloud-marker>
  <tdt-marker lnglat="116.404,39.915">
    <tdt-info-window open>
      <div>信息窗内容</div>
    </tdt-info-window>
  </tdt-marker>

  <!-- 收编：子级覆盖物加入聚合 / 图层组，而非直接上屏 -->
  <tdt-marker-clusterer grid-size="70">
    <tdt-marker lnglat="116.35,39.95"></tdt-marker>
    <tdt-marker lnglat="116.36,39.94"></tdt-marker>
  </tdt-marker-clusterer>
  <tdt-layer-group>
    <tdt-polyline path="116.38,39.88;116.40,39.89" color="#f59e0b"></tdt-polyline>
  </tdt-layer-group>
</tdt-map>

坐标类 attribute 用 "lng,lat" 逗号分隔，坐标集合用 ";" 分隔；海量点的绘制样式为纯数据对象，用 JSON 写在 styles 里。嵌套在覆盖物元素内的 tdt-info-window 由宿主打开，独立使用时经 lnglat 由地图打开。

Edit this pageorReport an issue

地图

TdtMap 地图容器：props、事件与命令式访问

控件

缩放、比例尺、版权、鹰眼与地图类型控件