CapDrive
Guida all’uso

Map

Visualizza mappe, posizioni e percorsi all'interno del misuratore. È possibile impostare il centro della fotocamera, l'orientamento, lo zoom e lo stile della mappa, utilizzando path per fornire punti del percorso; seguire la posizione dell'utente richiede dati di posizionamento validi.

Esempio

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

Utilizzo

  • center controlla la camera; path fornisce il percorso separatamente. Il centro non genera percorsi; null separa tratti. cameraAnimation anima la camera. I percorsi accettano Color, non gradienti. Verifica la posizione o fissa coordinate.
  • x/y e transform seguono il layout. Spostare un figlio non spinge gli altri; usa spacing o Spacer. Rotazione e scala interessano il disegno completo.

Proprietà

center?"userLocation" | "dataLocation" | MapCoordinate

Centro della fotocamera: posizione nativa, posizione attuale dello strumento o coordinate fisse. Predefinito userLocation.

Esempio"userLocation"
showUserLocation?boolean

Mostra il marcatore nativo della posizione quando disponibile.

Esempiotrue
path?ReadonlyArray<MapCoordinate | null>

Coordinate del percorso in ordine. Null separa i segmenti. Latitudine/longitudine; un array vuoto non disegna percorsi.

Esempio[]
pathStyle?MapPathStyle

Stile nativo: Color, spessore, estremità, giunzioni, tratteggio, contorno e marcatori facoltativi. Sfumature non supportate.

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

Direzione: northUp, vehicle, path o gradi modulo 360. La direzione del percorso rispetta le interruzioni.

Esempio"northUp"
regionOffset?ViewPoint

Spostamento dell’inquadratura in punti. x/y positivi spostano la regione a destra/in basso e il contenuto a sinistra/in alto.

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

Inclinazione della fotocamera in gradi; 0 guarda verticalmente in basso.

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

standard strade, satellite immagini, hybrid immagini con etichette.

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

automatic segue l’ambiente; light/dark forza l’aspetto della mappa.

Esempio"automatic"
cameraAnimation?boolean

Anima i cambi della fotocamera nativa. Attivo per impostazione predefinita, tranne al primo fotogramma e con movimento ridotto.

Esempiotrue
Proprietà comuni
width?number | "auto" | "fill"

Larghezza in punti, dimensione automatica o riempimento del contenitore.

Esempio"fill"
height?number | "auto" | "fill"

Altezza in punti, dimensione automatica o riempimento del contenitore.

Esempio"fill"
x?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0
y?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0
transform?ViewTransform

Trasformazione globale senza cambiare il layout. Traslazione in punti, rotazione/inclinazione in gradi, scala 1 invariata, ancoraggi 0–1.

Esempio{rotation: 0}
opacity?number

Opacità dell’intero View: 0 trasparente, 1 opaco.

Esempio1
cornerRadius?number

Raggio degli angoli in punti.

Esempio0
clipped?boolean

Ritaglia il disegno oltre i limiti del View.

Esempiofalse
clip?"rectangle" | "ellipse"

Forma di ritaglio rectangle o ellipse; Material accetta anche false per disattivarlo.

Esempio"rectangle"
zIndex?number

Ordine tra elementi fratelli; valori più grandi appaiono davanti.

Esempio0
animations?MapAnimation[]

Anima le modifiche alle proprietà. duration/delay in secondi; from/to sono estremi; repeat/autoreverse controllano le ripetizioni, wrap il periodo.

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

Identità stabile tra elementi fratelli.

Esempio pratico

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

Animazione

Animazione

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

Quando omesso

La tabella documenta omissioni verificate nell’implementazione. Gli esempi non sono valori predefiniti. Specifica valori per risultati fissi; misure e colori contestuali non sono costanti.

ProprietàQuando omesso
center"userLocation"
heading"northUp"
cameraAnimationtrue
mapStyle"standard"
appearance"automatic"
showUserLocationtrue
pitch0

$data · Dati di guida

Animazione

Polyline

Precedente

Path

Passaggio successivo

In questa pagina

EsempioUtilizzoProprietàEsempio praticoAnimazioneQuando omessoAPI correlate