Maps By Google and Apple (Cartes de Google et Apple)

PreviousLocalisation NextLocation Sensor (Capteur de localisation)

Last updated 4 years ago

Was this helpful?

Maps By Google and Apple (Cartes de Google et Apple)

Vue d'ensemble

Choisissez votre fournisseur

Pour iOS, vous avez la possibilité de choisir entre Apple Maps ou Google Maps. Sur Android, seul Google Maps est disponible. Google Maps offre davantage d'options de style personnalisé, allant de différents types de cartes à la coloration et à l'exposition ou la dissimulation de caractéristiques cartographiques.

Propriété

Description

Provider Advanced

Par défaut (google) ; Pour sélectionner Apple Maps pour iOS, laissez la propriété blank

Google Maps : Ajouter une clé API

Il est possible d'ajouter votre propre clé API Google Maps à votre projet d'application Thunkable.

Zoomer et centrer la carte

Propriété

Description

Latitude

Par défaut (37.78) ; degrés au nord ou au sud de l'équateur, de -90 à 90. Les emplacements au nord de l'équateur sont positifs et ceux au sud sont négatifs. La latitude à l'équateur est de 0°.

Longitude

Défaut (-122.4) ; Degrés à l'est ou à l'ouest du méridien origine, de -180 à 180. Les emplacements à l'ouest du premier méridien sont négatifs et ceux à l'est sont positifs. La longitude au premier méridien est de 0°.

Zoom

Par défaut (0) ; la plage est de -15 à 10 où -15 est le plus grand zoom arrière

ShowUserLocation

Par défaut (true) ; si true, indique l'emplacement de l'utilisateur sous la forme d'un point bleu clignotant

ShowMyLocationButton (Google Maps uniquement)

Par défaut (true) ; Dans true, affiche le bouton "my location" qui se centre automatiquement sur la carte de l'emplacement de l'utilisateur

Styler la carte

Pour donner à la carte le style de l'image ci-dessus, réglez le fournisseur sur Google, affichez le trafic sur true, le type de carte sur standard et la chaîne de style de carte personnalisée sur :

[ {"elementType" : "géométrie", "styleurs" : [ { "color" : "#f5f5f5" } } } }, { "elementType" : "geometry.fill", "stylers" : [ { "color" : "#ffffff" } ] }, { "elementType" : "labels.icon", "stylers" : [ { "visibility" : "off" } ] } }, { "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#000000" } ] }, { "featureType" : "administrative.land_parcel", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#bdbdbd" } ] }, { "featureType" : "poi", "elementType" : "geometry", "stylers" : [ { "color" : "#eeeeee" } } } }, { "featureType" : "poi", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#757575" } ] }, { "featureType" : "poi.park", "elementType" : "geometry", "stylers" : [ { "color" : "#e5e5e5" } ] }, { "featureType" : "poi.park", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#9e9e9e" } ] }, { "featureType" : "road", "elementType" : "geometry", "stylers" : [ {"color" : "#ffffff" } ] } }, {"featureType" : "road", "elementType" : "geometry.fill", "stylers" : [ { "color" : "#d8d8d8" } ] }, { "featureType" : "road.arterial", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#757575" } ] }, { "featureType" : "road.highway", "elementType" : "geometry", "stylers" : [ {"color" : "#dadada" } ] } }, {"featureType" : "road.highway", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#616161" } ] }, { "featureType" : "road.local", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#9e9e9e" } ] }, { "featureType" : "transit.line", "elementType" : "geometry", "stylers" : [ { "color" : "#e5e5e5" } ] }, { "featureType" : "transit.station", "elementType" : "geometry", "stylers" : [ { "color" : "#eeeeee" } ] }, { "featureType" : "water", "elementType" : "geometry", "stylers" : [ { "color" : "#e4e4e4" } ] }, { "featureType" : "water", "elementType" : "geometry.fill", "stylers" : [ { "color" : "#f3f3f3" } ] }, { "featureType" : "water", "elementType" : "labels.text.fill", "stylers" : [ { "color" : "#9e9e9e" } ] } } ]

Un certain nombre de propriétés Advanced sont disponibles pour vous aider à ajouter un style personnalisé à votre carte. Voici les plus populaires.

Propriété

Description

MapType Advanced

Par défaut (standard) ; le standard est le style de carte classique ;satellite n'affiche que l'imagerie satellite ; hybrid montre les routes et les caractéristiques superposées sur l'imagerie satellite ; terrain montre le terrain physique superposé sur une carte classique (Google Maps uniquement)

Custom Map Style String (Google Maps uniquement) Advanced

ShowTraffic Advanced

Par défaut (false) ; si true, affiche la superposition du trafic en temps réel sur la carte

Modifier la taille de la carte

Plus d'informations sur le dimensionnement de votre application

Propriété

Description

Height(Hauteur)

Par défaut (Fill Container) ; quatre options : 1)Fit contents auto-ajustement à la taille du contenu ou 2) Fill containerauto-ajustement au conteneur 3) Relative Size en pourcentage de l'écran, 4) Absolute Size en pixels

Width (Largeur)

Par défaut (Ajuster le conteneur) ; quatre options : 1) Ajuster le contenu qui s'adapte automatiquement à la taille du contenu ou 2) Remplir le conteneur qui s'adapte automatiquement à la taille du conteneur 3) Taille relative en pourcentage de l'écran, 4) Taille absolue en pixels

Ajouter un espace

Pour trouver les propriétés d'espacement, vous devez sélectionner l'onglet Advanced

Propriété

Description

Margin Advanced

Par défaut (none) ; la marge est l'espace à l'extérieur de la bordure d'un composant ; Vous pouvez définir un espace en haut, en bas, à droite ou à gauche du composant dans les deux pixels ou en pourcentage de l'écran

Padding advanced

Par défaut (none) ; le remplissage est l'espace entre le contenu et la bordure d'un élément ; Vous pouvez définir l'espace en haut, en bas, à droite ou à gauche de l'élément en pixels ou en pourcentage de l'écran

Ajouter un marqueur

Les options de style pour les marqueurs sont actuellement limitées. Nous travaillons à ajouter la possibilité de changer les couleurs ainsi que d'ajouter des icônes personnalisées.

Vous pouvez ajouter un marqueur standard par défaut à votre carte avec les blocs ci-dessous. Le composant Carte ne fournit pas encore ses propres latitude et longitude, nous recommandons donc actuellement d'utiliser le composant Capteur de localisation

Ajouter une polyligne

Pour ajouter une polyligne, vous pouvez utiliser les blocs ci-dessous où les coordinates doivent figurer dans une liste d'objets la latitude et la longitude, le stroke Width est un nombre entier et le stroke Color est au format hexadécimal

Ajouter un polygone

Pour ajouter un polygone, vous pouvez utiliser les blocs ci-dessous où les coordonnées doivent figurer dans une liste d'objets la latitude et la longitude, le stroke Width est un entier, le stroke Color est au format hexadécimal et le fill Color est au format hexadécimal.

Supprimer les marqueurs, les polylignes et les polygones

Carte des événements

La carte présente plusieurs événements. Vous pouvez déclencher des actions lorsque ces événements se produisent.

Sur la carte

Cet événement se produit lorsque la carte a été chargée dans votre application. C'est un bon moment pour ajouter à votre application les marqueurs, polylignes ou polygones que vous souhaitez que l'utilisateur voit dès l'ouverture de votre application.

Sur le changement de localisation de l'utilisateur

L'objet de coordonnées a les propriétés suivantes :

target: ID numérique de l'application coordinate:{ latitude: latitude du point sélectionné longitude: longitude du point sélectionné } position:{ x: x-position du point sélectionné sur le composant Map on the Map component y: y-position du point sélectionné sur le composant Map }