Map

Exiba mapas, locais e rotas dentro do medidor. O centro da câmera, a orientação, o zoom e o estilo do mapa podem ser definidos, usando path para fornecer pontos de rota; seguir a localização do usuário requer dados de posicionamento válidos.

Exemplo

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

Uso

center controla a câmera; path fornece a rota separadamente. Centro não gera rota; null separa trechos. cameraAnimation anima a câmera. Rotas aceitam Color, não gradientes. Verifique localização ou fixe coordenadas.
x/y e transform atuam após o layout. Mover um filho não empurra os vizinhos; use spacing ou Spacer para intervalos. Rotação e escala afetam o desenho inteiro.

Propriedades

center?"userLocation" | "dataLocation" | MapCoordinate

Centro da câmera: localização nativa, localização atual do instrumento ou coordenadas fixas. Padrão userLocation.

Exemplo"userLocation"

showUserLocation?boolean

Mostra o marcador nativo de localização quando disponível.

Exemplotrue

path?ReadonlyArray<MapCoordinate | null>

Coordenadas da rota em ordem. Null separa segmentos. Usa latitude/longitude; um array vazio não desenha rota.

Exemplo[]

pathStyle?MapPathStyle

Estilo nativo: Color, largura, extremidades, junções, traços, contorno e marcadores opcionais. Não aceita gradientes.

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

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

Direção: northUp, vehicle, path ou graus módulo 360. A direção da rota respeita quebras de segmento.

Exemplo"northUp"

regionOffset?ViewPoint

Deslocamento do enquadramento em pontos. x/y positivos movem a região à direita/abaixo e o conteúdo à esquerda/acima.

Exemplo{x: 0, y: 0}

pitch?number

Inclinação da câmera em graus; 0 olha verticalmente para baixo.

Exemplo0

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

standard ruas, satellite imagens, hybrid imagens com rótulos.

Exemplo"standard"

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

automatic segue o ambiente; light/dark fixa a aparência do mapa.

Exemplo"automatic"

cameraAnimation?boolean

Animar mudanças da câmera nativa. Ativado por padrão, exceto no primeiro quadro e com movimento reduzido.

Exemplotrue

Propriedades comuns

width?number | "auto" | "fill"

Largura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo"fill"

height?number | "auto" | "fill"

Altura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo"fill"

x?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0

y?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0

transform?ViewTransform

Transforma o View inteiro sem mudar o layout. Translação em pontos, rotação/inclinação em graus, escala 1 sem mudança, âncoras 0–1.

Exemplo{rotation: 0}

opacity?number

Opacidade de todo o View: 0 transparente, 1 opaco.

Exemplo1

cornerRadius?number

Raio dos cantos em pontos.

Exemplo0

clipped?boolean

Recorta o desenho que ultrapassa os limites do View.

Exemplofalse

clip?"rectangle" | "ellipse"

Recorte rectangle ou ellipse; Material também aceita false para desativar.

Exemplo"rectangle"

zIndex?number

Ordem entre elementos irmãos; valores maiores ficam na frente.

Exemplo0

animations?MapAnimation[]

Anima mudanças de propriedade. duration/delay em segundos; from/to são extremos; repeat/autoreverse controlam repetição e wrap o período.

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

key?string | number

Identidade estável entre elementos irmãos.

Exemplo prático

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

Animação

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

Quando omitido

A tabela apresenta omissões verificadas na implementação. Exemplos não são padrões. Para resultado fixo, passe valor explícito; dimensões e cores de contexto não são constantes.

Propriedades	Quando omitido
`center`	`"userLocation"`
`heading`	`"northUp"`
`cameraAnimation`	`true`
`mapStyle`	`"standard"`
`appearance`	`"automatic"`
`showUserLocation`	`true`
`pitch`	`0`

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

$data · Dados de condução

Animação

Nesta página

Map

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

APIs relacionadas

$data · Dados de condução

Animação

Nesta página