CapDrive
Guía de uso

Map

Muestra mapas, ubicaciones y rutas dentro del medidor. Se pueden configurar el centro de la cámara, la orientación, el zoom y el estilo del mapa, usando path para proporcionar puntos de ruta; Seguir la ubicación del usuario requiere datos de posicionamiento válidos.

Ejemplo

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

Uso

  • center controla la cámara; path aporta la ruta por separado. Fijar el centro no crea una ruta; null separa tramos. cameraAnimation anima la cámara. Las rutas admiten Color, no gradientes. Comprueba ubicación o fija coordenadas.
  • x/y y transform actúan después de reservar espacio. Mover un hijo no empuja a sus hermanos; usa spacing o Spacer. Giro y escala afectan al dibujo completo.

Propiedades

center?"userLocation" | "dataLocation" | MapCoordinate

Centro de cámara: ubicación nativa, ubicación actual del instrumento o coordenadas fijas. Por defecto userLocation.

Ejemplo"userLocation"
showUserLocation?boolean

Muestra el marcador nativo de ubicación cuando está disponible.

Ejemplotrue
path?ReadonlyArray<MapCoordinate | null>

Coordenadas del recorrido en orden. Null separa segmentos. Usa latitud/longitud; un arreglo vacío no dibuja recorrido.

Ejemplo[]
pathStyle?MapPathStyle

Estilo nativo: Color, ancho, extremos, uniones, guiones, contorno y marcadores opcionales. No admite degradados.

Ejemplo{stroke: $env.accent, lineWidth: 4, outlineStroke: $env.foreground, outlineWidth: 1}
heading?"northUp" | "vehicle" | "path" | number

Rumbo: northUp, vehicle, path o grados módulo 360. El rumbo del recorrido respeta los cortes entre segmentos.

Ejemplo"northUp"
regionOffset?ViewPoint

Desplazamiento del encuadre en puntos. x/y positivos mueven la región a la derecha/abajo y el contenido a la izquierda/arriba.

Ejemplo{x: 0, y: 0}
pitch?number

Inclinación de cámara en grados; 0 mira verticalmente hacia abajo.

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

standard carreteras, satellite imágenes, hybrid imágenes con etiquetas.

Ejemplo"standard"
appearance?"automatic" | "light" | "dark"

automatic sigue el entorno; light/dark fija el aspecto del mapa.

Ejemplo"automatic"
cameraAnimation?boolean

Animar cambios de cámara nativos. Activado por defecto, excepto en el primer cuadro y con movimiento reducido.

Ejemplotrue
Propiedades comunes
width?number | "auto" | "fill"

Anchura en puntos, tamaño automático o relleno del contenedor.

Ejemplo"fill"
height?number | "auto" | "fill"

Altura en puntos, tamaño automático o relleno del contenedor.

Ejemplo"fill"
x?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
y?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
transform?ViewTransform

Transformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.

Ejemplo{rotation: 0}
opacity?number

Opacidad de todo el View: 0 transparente, 1 opaco.

Ejemplo1
cornerRadius?number

Radio de las esquinas en puntos.

Ejemplo0
clipped?boolean

Recorta el dibujo que sobresale de los límites del View.

Ejemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle o ellipse; Material también admite false para desactivarlo.

Ejemplo"rectangle"
zIndex?number

Orden entre elementos hermanos; los valores mayores aparecen delante.

Ejemplo0
animations?MapAnimation[]

Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.

Ejemplo[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identidad estable entre elementos hermanos.

Ejemplo práctico

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

Animación

Animación

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

Al omitir

La tabla documenta omisiones comprobadas en la implementación. Los ejemplos no son valores predeterminados. Especifica valores para resultados fijos; tamaños y colores del contexto no son constantes.

PropiedadesAl omitir
center"userLocation"
heading"northUp"
cameraAnimationtrue
mapStyle"standard"
appearance"automatic"
showUserLocationtrue
pitch0

$data · Datos de conducción

Animación

Polyline

Anterior

Path

Siguiente paso

En esta página

EjemploUsoPropiedadesEjemplo prácticoAnimaciónAl omitirAPI relacionadas