组件
控件
缩放、比例尺、版权、鹰眼与地图类型控件
控件组件写在 <TdtMap> 内部即自动挂载，卸载时自动移除。
地图加载中…
缩放控件 Zoom
<TdtControlZoom position="bottomright" />
<tdt-control-zoom position="bottomright" zoom-in-text="+" zoom-out-text="−" zoom-in-title="放大" zoom-out-title="缩小"></tdt-control-zoom>
| Prop | 类型 | 说明 |
|---|---|---|
position | ControlPosition | 控件位置 |
zoomInText / zoomOutText | string | 放大/缩小按钮文本 |
zoomInTitle / zoomOutTitle | string | 放大/缩小按钮提示 |
比例尺控件 Scale
<TdtControlScale position="bottomleft" color="#3388ff" />
<tdt-control-scale position="bottomleft" color="#3388ff"></tdt-control-scale>
| Prop | 类型 | 说明 |
|---|---|---|
position | ControlPosition | 控件位置 |
color | string | 比例尺颜色 |
版权控件 Copyright
<TdtControlCopyright id="custom" content="© 示例版权信息" />
<tdt-control-copyright id="custom" content="© 示例版权信息"></tdt-control-copyright>
| Prop | 类型 | 说明 |
|---|---|---|
position | ControlPosition | 控件位置 |
id | string | 版权信息的唯一标识 |
content | string | 版权文本，支持 HTML |
bounds | [[swLng, swLat], [neLng, neLat]] | LngLatBounds | 该版权信息适用的地理范围 |
鹰眼控件 OverviewMap
<TdtControlOverviewMap position="bottomright" :size="[150, 100]" :is-open="false" />
<tdt-control-overview-map position="bottomright" size="150,100"></tdt-control-overview-map>
| Prop | 类型 | 说明 |
|---|---|---|
position | ControlPosition | 控件位置 |
size | [number, number] | 鹰眼控件大小 |
isOpen | boolean | 添加到地图后的开合状态 |
地图类型控件 MapType
<TdtControlMapType position="topright" />
<tdt-control-map-type position="topright"></tdt-control-map-type>
| Prop | 类型 | 说明 |
|---|---|---|
position | ControlPosition | 控件位置 |
mapTypes | ControlMapTypeOptionsMapType[] | 控件展示的地图类型，默认为 SDK 默认列表 |
Web Components
<tdt-map tk="…" center="116.404,39.915" zoom="12">
<tdt-control-zoom position="bottomright"></tdt-control-zoom>
<tdt-control-scale></tdt-control-scale>
<tdt-control-copyright position="bottomleft" id="custom" content="© 自定义版权"></tdt-control-copyright>
<tdt-control-overview-map is-open></tdt-control-overview-map>
<tdt-control-map-type position="topright"></tdt-control-map-type>
</tdt-map>
五个控件元素与 Vue 端一一对应：tdt-control-zoom、tdt-control-scale、tdt-control-copyright、tdt-control-overview-map、tdt-control-map-type。控件无事件表，attribute 随上方各表字段（kebab-case）；tdt-control-map-type 的 mapTypes 为 SDK 实例列表，仅 JS property 可用，无对应 attribute。