CapDrive
Benutzerhandbuch

Map

Zeigen Sie Karten, Standorte und Routen im Messgerät an. Kameramitte, Ausrichtung, Zoom und Kartenstil können eingestellt werden, indem path zur Bereitstellung von Routenpunkten verwendet wird; Für die Verfolgung des Standorts des Benutzers sind gültige Positionsdaten erforderlich.

Beispiel

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

Verwendung

  • center steuert die Kamera, path liefert separat die Route. Ohne path entsteht keine Route; null trennt Abschnitte. cameraAnimation animiert die Kamera. Routen nehmen Color, keine Gradienten. Standort prüfen oder feste Koordinaten setzen.
  • x/y und transform folgen der Platzberechnung. Verschieben verdrängt keine Geschwister; Abstände ändern spacing oder Spacer. Rotation und Skalierung betreffen die fertige Zeichnung.

Eigenschaften

center?"userLocation" | "dataLocation" | MapCoordinate

Kamerazentrum: nativer Standort, aktueller Instrumentstandort oder feste Koordinaten. Standard: userLocation.

Beispiel"userLocation"
showUserLocation?boolean

Nativen Standortmarker anzeigen, wenn eine Position vorliegt.

Beispieltrue
path?ReadonlyArray<MapCoordinate | null>

Routenkoordinaten in Reihenfolge. Null trennt Segmente. Breiten-/Längengrad; ein leeres Array zeichnet keine Route.

Beispiel[]
pathStyle?MapPathStyle

Nativer Routenstil: Color, Breite, Enden, Verbindungen, Striche, Kontur und optionale Endpunktmarkierungen. Keine Farbverläufe.

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

Kamerarichtung: northUp, vehicle, path oder Grad modulo 360. Die Pfadrichtung beachtet Segmentunterbrechungen.

Beispiel"northUp"
regionOffset?ViewPoint

Ausschnittversatz in Bildschirmpunkten. Positives x/y verschiebt den Ausschnitt nach rechts/unten und den Inhalt nach links/oben.

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

Kameraneigung in Grad; 0 blickt senkrecht nach unten.

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

standard Straßen, satellite Satellitenbild, hybrid Satellitenbild mit Beschriftung.

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

automatic folgt der Umgebung; light/dark erzwingt die Kartendarstellung.

Beispiel"automatic"
cameraAnimation?boolean

Native Kameraübergänge animieren. Standardmäßig aktiv, außer beim ersten Bild und bei reduzierter Bewegung.

Beispieltrue
Allgemeine Eigenschaften
width?number | "auto" | "fill"

Breite in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel"fill"
height?number | "auto" | "fill"

Höhe in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel"fill"
x?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0
y?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0
transform?ViewTransform

Gesamten View ohne Layoutänderung transformieren. Verschiebung in Punkten, Drehung/Neigung in Grad, Skalierung 1 unverändert, Anker 0–1.

Beispiel{rotation: 0}
opacity?number

Deckkraft des gesamten Views: 0 transparent, 1 undurchsichtig.

Beispiel1
cornerRadius?number

Eckenradius in Punkten.

Beispiel0
clipped?boolean

Zeichnung außerhalb der View-Grenzen abschneiden.

Beispielfalse
clip?"rectangle" | "ellipse"

Schnittform rectangle oder ellipse; Material erlaubt auch false zum Abschalten.

Beispiel"rectangle"
zIndex?number

Zeichenreihenfolge unter Geschwistern; größere Werte liegen vorne.

Beispiel0
animations?MapAnimation[]

Attributänderung animieren. duration/delay in Sekunden; from/to sind Endwerte; repeat/autoreverse steuern Wiederholung, wrap die Periode.

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

Stabile Kennung unter Geschwisterelementen.

Praxisbeispiel

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

Animation

Animation

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

Beim Weglassen

Die Tabelle zeigt implementierte Vorgaben beim Weglassen. Eigenschaftsbeispiele sind keine Standardwerte. Für feste Ergebnisse explizite Werte setzen; kontextabhängige Maße und Themenfarben sind keine Konstanten.

EigenschaftenBeim Weglassen
center"userLocation"
heading"northUp"
cameraAnimationtrue
mapStyle"standard"
appearance"automatic"
showUserLocationtrue
pitch0

$data · Fahrdaten

Animation

Polyline

Zurück

Path

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs