Controls 控件

渲染地图控制按钮（缩放、指北针、定位、全屏）。必须在 Map 内部使用。

基本用法

默认情况下，只显示缩放按钮，位于地图右下角：

MapWithControls.tsx
1234567891011
import { Map, MapControls } from class="tk-string">"@/components/ui/map";

export function MapWithControls() {
  return (
    <div className=class="tk-string">"h-[320px] overflow-hidden rounded-lg">
      <Map center={[-74.006, 40.7128]} zoom={11}>
        <MapControls />
      </Map>
    </div>
  );
}

显示所有控件

启用所有控件按钮：

12345678
<Map center={[-74.006, 40.7128]} zoom={11}>
  <MapControls
    showZoom
    showCompass
    showLocate
    showFullscreen
  />
</Map>

控件位置

通过 position 属性控制控件位置：

123
<Map center={[-74.006, 40.7128]} zoom={11}>
  <MapControls position=class="tk-string">"top-left" showZoom showCompass />
</Map>

定位回调

当用户点击定位按钮时，获取用户坐标：

LocateMap.tsx
123456789101112131415161718192021222324
import { Map, MapControls } from class="tk-string">"@/components/ui/map";
import { useState } from class="tk-string">"react";

export function LocateMap() {
  const [coords, setCoords] = useState(null);

  return (
    <>
      <div className=class="tk-string">"h-[320px] overflow-hidden rounded-lg">
        <Map center={[-74.006, 40.7128]} zoom={11}>
          <MapControls
            showLocate
            onLocate={(c) => setCoords(c)}
          />
        </Map>
      </div>
      {coords && (
        <p className=class="tk-string">"mt-2 text-sm text-muted-foreground">
          你的位置：{coords.latitude.toFixed(4)}, {coords.longitude.toFixed(4)}
        </p>
      )}
    </>
  );
}

属性

属性	类型	默认值	描述
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"bottom-right"`	控件在地图上的位置
`showZoom`	`boolean`	`true`	显示缩放按钮
`showCompass`	`boolean`	`false`	显示指北针按钮以重置方向
`showLocate`	`boolean`	`false`	显示定位按钮以查找用户位置
`showFullscreen`	`boolean`	`false`	显示全屏切换按钮
`className`	`string`	—	控件容器的额外 CSS 类名
`onLocate`	`(coords: { longitude: number; latitude: number }) => void`	—	定位用户时的回调函数

下一步

标记

MapMarker 组件