Map

在儀表內顯示地圖、位置與路線。可設定相機中心、朝向、縮放和地圖樣式，使用 path 提供路線點；跟隨使用者位置需要有效的定位資料。

範例

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

使用說明

center 決定相機中心，path 另提供路線；中心不會自動產生路線。null 斷開路段。相機用 cameraAnimation，路線僅接受 Color。位置無效時檢查資料或指定座標。
先計算版面佔位，再套用 x/y 和 transform。右移子 View 不會推開兄弟；改間隔用 spacing 或 Spacer。旋轉、縮放作用於完整繪製結果。

屬性

center?"userLocation" | "dataLocation" | MapCoordinate

相機中心來源：原生定位、儀表目前定位或固定經緯度。預設為 userLocation。

範例"userLocation"

showUserLocation?boolean

有定位時顯示原生使用者位置標記。

範例true

path?ReadonlyArray<MapCoordinate | null>

依順序排列的軌跡經緯度。null 中斷一段軌跡；空陣列不繪製軌跡。

範例[]

pathStyle?MapPathStyle

原生軌跡樣式：Color 顏色、線寬、端點、連接、虛線、外描邊及可選起終點標記。不支援漸層。

範例{stroke: $env.accent, lineWidth: 4, outlineStroke: $env.foreground, outlineWidth: 1}

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

相機朝向：northUp、vehicle、path 或按 360 取模的角度。軌跡朝向不會跨越斷點。

範例"northUp"

regionOffset?ViewPoint

取景偏移，單位為螢幕點。正 x/y 將取景範圍向右/下移動，地圖內容相應向左/上移動。

範例{x: 0, y: 0}

pitch?number

相機傾角，單位為度；0 垂直向下看。

範例0

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

standard 道路、satellite 衛星、hybrid 衛星加標註。

範例"standard"

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

automatic 跟隨環境；light/dark 固定地圖明暗。

範例"automatic"

cameraAnimation?boolean

啟用原生相機過渡，預設開啟。首幀及系統減少動態效果時不播放。

範例true

通用屬性

width?number | "auto" | "fill"

寬度：點數、自動測量或填滿父區域。

範例"fill"

height?number | "auto" | "fill"

高度：點數、自動測量或填滿父區域。

範例"fill"

x?number

視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。

範例0

y?number

視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。

範例0

transform?ViewTransform

整體視覺變換不改變版面。平移用點，旋轉及傾斜用度，縮放 1 不變，錨點用 0–1。

範例{rotation: 0}

opacity?number

整個 View 的不透明度：0 完全透明，1 完全不透明。

範例1

cornerRadius?number

圓角半徑，單位為點。

範例0

clipped?boolean

是否裁切超出 View 邊界的內容。

範例false

clip?"rectangle" | "ellipse"

裁切形狀：rectangle 矩形或 ellipse 橢圓；Material 另可用 false 停用。

範例"rectangle"

zIndex?number

同層 View 的繪製順序，數值越大越靠前。

範例0

animations?MapAnimation[]

屬性改變時播放動畫。duration/delay 用秒，from/to 設端點，repeat/autoreverse 控制重複，wrap 設週期。

範例[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

兄弟節點中的穩定識別碼。

組合範例

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,
      }}
    />
  );
}

動畫

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

省略時的行為

下表是經實作核對的省略行為；屬性範例不是預設值。固定效果應明確傳值，尺寸和主題色等依環境變動，不能視為常數。

屬性	省略時的行為
`center`	`"userLocation"`
`heading`	`"northUp"`
`cameraAnimation`	`true`
`mapStyle`	`"standard"`
`appearance`	`"automatic"`
`showUserLocation`	`true`
`pitch`	`0`

範例

使用說明

屬性

組合範例

動畫

省略時的行為

$data · 駕駛資料

動畫

本頁內容

Map

範例

使用說明

屬性

組合範例

動畫

省略時的行為

相關 API

$data · 駕駛資料

動畫

本頁內容