CapDrive
利用ガイド

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、ルート色は Gradient でなく Color。位置がなければ固定座標も指定できます。
  • 配置領域を確保した後に x/y と transform を適用します。子を右に動かしても兄弟は押されません。間隔には spacing や Spacer、完成した描画の回転・拡大には transform を使います。

プロパティ

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"
cameraAnimationtrue
mapStyle"standard"
appearance"automatic"
showUserLocationtrue
pitch0

$data · 走行データ

アニメーション

Polyline

前へ

Path

次のステップ

このページの内容

例使い方プロパティ組み合わせ例アニメーション省略時の動作関連 API