Map

Hiển thị bản đồ, vị trí và tuyến đường trong đồng hồ. Có thể đặt trung tâm máy ảnh, hướng, thu phóng và kiểu bản đồ bằng cách sử dụng path để cung cấp các điểm tuyến đường; theo dõi vị trí của người dùng yêu cầu dữ liệu định vị hợp lệ.

Ví dụ

function main() {
  return (
    <Map
      center="userLocation"
      heading="northUp"
      mapStyle="standard"
      appearance="automatic"
      showUserLocation={true}
      cameraAnimation={true}
      regionOffset={{ x: 0, y: 20 }}
    />
  );
}

Cách sử dụng

center đặt camera, path cung cấp tuyến riêng. Tâm không tạo tuyến; null tách đoạn. cameraAnimation dành cho camera. Màu tuyến chỉ Color, không gradient. Kiểm tra vị trí hoặc đặt tọa độ cố định.
x/y và transform áp dụng sau bố cục. Dời con không đẩy các con khác; dùng spacing hoặc Spacer. Xoay và tỷ lệ tác động lên toàn bộ hình đã vẽ.

Thuộc tính

center?"userLocation" | "dataLocation" | MapCoordinate

Tâm camera: vị trí hệ thống, vị trí hiện tại của đồng hồ hoặc tọa độ cố định. Mặc định userLocation.

Ví dụ"userLocation"

showUserLocation?boolean

Hiện dấu vị trí người dùng gốc khi có vị trí.

Ví dụtrue

path?ReadonlyArray<MapCoordinate | null>

Tọa độ tuyến đường theo thứ tự. Null ngắt đoạn. Dùng vĩ độ/kinh độ; mảng trống không vẽ tuyến đường.

Ví dụ[]

pathStyle?MapPathStyle

Kiểu tuyến đường gốc: Color, độ rộng, đầu nét, nối nét, nét đứt, viền và dấu đầu/cuối tùy chọn. Không hỗ trợ chuyển sắc.

Ví dụ{stroke: $env.accent, lineWidth: 4, outlineStroke: $env.foreground, outlineWidth: 1}

heading?"northUp" | "vehicle" | "path" | number

Hướng camera: northUp, vehicle, path hoặc góc chuẩn hóa theo 360. Hướng đường đi tuân theo ngắt đoạn.

Ví dụ"northUp"

regionOffset?ViewPoint

Độ lệch vùng nhìn theo điểm màn hình. x/y dương dịch vùng sang phải/xuống, nội dung bản đồ sang trái/lên.

Ví dụ{x: 0, y: 0}

pitch?number

Góc nghiêng camera theo độ; 0 nhìn thẳng xuống.

Ví dụ0

mapStyle?"standard" | "satellite" | "hybrid"

standard đường phố, satellite ảnh vệ tinh, hybrid ảnh kèm nhãn.

Ví dụ"standard"

appearance?"automatic" | "light" | "dark"

automatic theo môi trường; light/dark cố định giao diện bản đồ.

Ví dụ"automatic"

cameraAnimation?boolean

Tạo hoạt ảnh cho thay đổi camera gốc. Mặc định bật, trừ khung đầu và chế độ Giảm chuyển động.

Ví dụtrue

Thuộc tính chung

width?number | "auto" | "fill"

Chiều rộng tính bằng point, tự động hoặc lấp đầy khung cha.

Ví dụ"fill"

height?number | "auto" | "fill"

Chiều cao tính bằng point, tự động hoặc lấp đầy khung cha.

Ví dụ"fill"

x?number

Dịch chuyển hiển thị theo điểm: x sang phải, y xuống dưới; không đổi chỗ trong bố cục.

Ví dụ0

y?number

Dịch chuyển hiển thị theo điểm: x sang phải, y xuống dưới; không đổi chỗ trong bố cục.

Ví dụ0

transform?ViewTransform

Biến đổi toàn View không đổi bố cục. Dịch chuyển theo điểm, xoay/nghiêng theo độ, tỷ lệ 1 giữ nguyên, điểm neo 0–1.

Ví dụ{rotation: 0}

opacity?number

Độ đục toàn bộ View: 0 trong suốt, 1 đục hoàn toàn.

Ví dụ1

cornerRadius?number

Bán kính bo góc theo điểm.

Ví dụ0

clipped?boolean

Cắt phần vẽ vượt ra ngoài View.

Ví dụfalse

clip?"rectangle" | "ellipse"

Hình cắt rectangle hoặc ellipse; Material còn nhận false để tắt.

Ví dụ"rectangle"

zIndex?number

Thứ tự vẽ giữa các phần tử cùng cấp; giá trị lớn nằm trước.

Ví dụ0

animations?MapAnimation[]

Hoạt ảnh khi thuộc tính đổi. duration/delay theo giây; from/to là đầu cuối; repeat/autoreverse điều khiển lặp, wrap là chu kỳ.

Ví dụ[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Định danh ổn định giữa các phần tử cùng cấp.

Ví dụ kết hợp

function main() {
  return (
    <Map
      width={260}
      height={180}
      center={{ latitude: 31.2304, longitude: 121.4737 }}
      heading="northUp"
      showUserLocation={false}
      cameraAnimation={false}
      path={[
        { latitude: 31.2304, longitude: 121.4737 },
        { latitude: 31.232, longitude: 121.476 },
        null,
        { latitude: 31.235, longitude: 121.48 },
        { latitude: 31.237, longitude: 121.482 },
      ]}
      pathStyle={{
        stroke: $env.accent,
        lineWidth: 4,
        outlineStroke: 'white',
        outlineWidth: 1,
        showEndpoints: true,
      }}
    />
  );
}

Hoạt ảnh

widthheightxyopacitycornerRadiustransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYregionOffset.xregionOffset.ypathStyle.lineWidthpathStyle.outlineWidthpathStyle.dashPhasepathStyle.strokepathStyle.outlineStroke

Khi bỏ qua

Bảng ghi hành vi bỏ qua đã kiểm tra từ triển khai; ví dụ không phải mặc định. Muốn kết quả cố định hãy truyền giá trị rõ, kích thước và màu theo ngữ cảnh không phải hằng số.

Thuộc tính	Khi bỏ qua
`center`	`"userLocation"`
`heading`	`"northUp"`
`cameraAnimation`	`true`
`mapStyle`	`"standard"`
`appearance`	`"automatic"`
`showUserLocation`	`true`
`pitch`	`0`

Ví dụ

Cách sử dụng

Thuộc tính

Ví dụ kết hợp

Hoạt ảnh

Khi bỏ qua

$data · Dữ liệu lái xe

Hoạt ảnh

Trên trang này

Map

Ví dụ

Cách sử dụng

Thuộc tính

Ví dụ kết hợp

Hoạt ảnh

Khi bỏ qua

API liên quan

$data · Dữ liệu lái xe

Hoạt ảnh

Trên trang này