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 применяются после раскладки. Сдвиг ребёнка не отталкивает соседей; интервалы задают 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

Преобразование всего 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

Порядок среди соседей; большее значение выводится впереди.

Пример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 · Данные о вождении

Анимация

На этой странице