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 单独提供路线；设置中心不会自动生成路线。path 中的 null 断开路段。相机动画使用 cameraAnimation；路线颜色只支持 Color，不支持渐变。没有有效位置时，先检查位置数据或指定固定坐标。
布局先决定占位，再应用 x/y 和 transform。把一个子 View 右移 20 点，不会把后面的兄弟推开；要改变间隔用 spacing 或 Spacer。旋转、缩放会作用于已经绘制好的整个 View。

属性

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

对整个 View 做视觉变换，不改变布局。平移用点，旋转和倾斜用角度，缩放 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 · 驾驶数据

动画

本页内容