Map

Affichez des cartes, des emplacements et des itinéraires dans le compteur. Le centre de la caméra, l'orientation, le zoom et le style de carte peuvent être définis, en utilisant path pour fournir des points d'itinéraire ; suivre la position de l'utilisateur nécessite des données de positionnement valides.

Exemple

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

Utilisation

center contrôle la caméra ; path fournit séparément le trajet. Le centre ne génère aucun trajet ; null sépare les segments. cameraAnimation anime la caméra. Les traits acceptent Color, pas Gradient. Vérifiez la position ou fixez des coordonnées.
x/y et transform s’appliquent après la disposition. Déplacer un enfant ne repousse pas ses voisins ; utilisez spacing ou Spacer. Rotation et échelle affectent le dessin complet.

Propriétés

center?"userLocation" | "dataLocation" | MapCoordinate

Centre de caméra : position native, position actuelle de l’instrument ou coordonnées fixes. Par défaut userLocation.

Exemple"userLocation"

showUserLocation?boolean

Affiche le marqueur natif de position lorsqu’elle est disponible.

Exempletrue

path?ReadonlyArray<MapCoordinate | null>

Coordonnées du trajet dans l’ordre. Null sépare les segments. Latitude/longitude ; un tableau vide ne trace aucun trajet.

Exemple[]

pathStyle?MapPathStyle

Style natif : Color, largeur, extrémités, jonctions, pointillés, contour et marqueurs facultatifs. Dégradés non pris en charge.

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

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

Orientation : northUp, vehicle, path ou degrés modulo 360. La direction du trajet respecte les coupures.

Exemple"northUp"

regionOffset?ViewPoint

Décalage du cadrage en points écran. x/y positifs déplacent la région vers la droite/le bas et le contenu vers la gauche/le haut.

Exemple{x: 0, y: 0}

pitch?number

Inclinaison de la caméra en degrés ; 0 regarde verticalement vers le bas.

Exemple0

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

standard : routes ; satellite : images ; hybrid : images et étiquettes.

Exemple"standard"

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

automatic suit l’environnement ; light/dark impose l’aspect de la carte.

Exemple"automatic"

cameraAnimation?boolean

Animer les changements de caméra natifs. Activé par défaut, sauf au premier affichage et en mouvement réduit.

Exempletrue

Propriétés communes

width?number | "auto" | "fill"

Largeur en points, taille automatique ou remplissage du parent.

Exemple"fill"

height?number | "auto" | "fill"

Hauteur en points, taille automatique ou remplissage du parent.

Exemple"fill"

x?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0

y?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0

transform?ViewTransform

Transformation globale sans changer la mise en page. Translation en points, rotation/inclinaison en degrés, échelle 1 inchangée, ancrages 0–1.

Exemple{rotation: 0}

opacity?number

Opacité globale du View : 0 transparent, 1 opaque.

Exemple1

cornerRadius?number

Rayon des coins en points.

Exemple0

clipped?boolean

Découpe les dessins dépassant les limites du View.

Exemplefalse

clip?"rectangle" | "ellipse"

Forme de découpe rectangle ou ellipse ; Material accepte aussi false pour la désactiver.

Exemple"rectangle"

zIndex?number

Ordre entre éléments frères ; les valeurs élevées sont devant.

Exemple0

animations?MapAnimation[]

Anime les changements de propriété. duration/delay en secondes ; from/to définissent les extrémités ; repeat/autoreverse la répétition, wrap la période.

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

key?string | number

Identifiant stable parmi les éléments frères.

Exemple pratique

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

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

En cas d’omission

Le tableau décrit les omissions vérifiées dans l’implémentation. Les exemples de propriétés ne sont pas des valeurs par défaut. Pour un résultat fixe, passez une valeur explicite ; tailles et couleurs contextuelles ne sont pas constantes.

Propriétés	En cas d’omission
`center`	`"userLocation"`
`heading`	`"northUp"`
`cameraAnimation`	`true`
`mapStyle`	`"standard"`
`appearance`	`"automatic"`
`showUserLocation`	`true`
`pitch`	`0`

Exemple

Utilisation

Propriétés

Exemple pratique

Animation

En cas d’omission

$data · Données de conduite

Animation

Sur cette page

Map

Exemple

Utilisation

Propriétés

Exemple pratique

Animation

En cas d’omission

API associées

$data · Données de conduite

Animation

Sur cette page