3D Maps

Classe Map3DElement

Classe google.maps.maps3d.Map3DElement

Map3DElement est une interface HTML pour la vue de carte 3D.

Élément personnalisé :
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled default-ui-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" range="number" roll="number" tilt="number"></gmp-map-3d>

Cette classe étend HTMLElement.

Cette classe implémente Map3DElementOptions.

Accédez-y en appelant le const {Map3DElement} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
Map3DElement
Map3DElement([options])
Paramètres :
bounds
Lorsqu'il est défini, il limite la position de la caméra aux limites de latitude/longitude spécifiées. Notez que les objets situés en dehors des limites sont toujours affichés. Les limites peuvent restreindre à la fois la longitude et la latitude, ou uniquement la latitude ou la longitude. Pour les limites de latitude uniquement, utilisez les longitudes ouest et est de -180 et 180, respectivement. Pour les limites de longitude uniquement, utilisez les latitudes nord et sud de 90 et -90, respectivement.
center
Centre de la carte, indiqué sous la forme d'un objet LatLngAltitude, où l'altitude est exprimée en mètres au-dessus du niveau du sol. Notez que cela ne correspond pas forcément à l'emplacement de la caméra, car le champ range affecte la distance de la caméra par rapport au centre de la carte. Si ce champ n'est pas défini, la valeur par défaut est {lat: 0, lng: 0, altitude: 63170000}. 63 170 000 mètres est l'altitude maximale autorisée (rayon de la Terre multiplié par 10).
Attribut HTML :
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultLabelsDisabled
Type : boolean optional
Par défaut : false
Lorsque la valeur est true, les libellés de carte par défaut ne sont pas affichés.
Attribut HTML :
  • <gmp-map-3d default-labels-disabled></gmp-map-3d>
defaultUIDisabled
Type : boolean optional
Par défaut : false
Lorsque la valeur est true, tous les boutons de l'UI par défaut sont désactivés. Ne désactive pas le clavier ni les commandes gestuelles.
Attribut HTML :
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
heading
Type : number optional
Cap de la carte (en degrés), où le nord est égal à zéro. En l'absence d'inclinaison, tout roulis sera interprété comme un cap.
Attribut HTML :
  • <gmp-map-3d heading="number"></gmp-map-3d>
maxAltitude
Type : number optional
Altitude maximale au-dessus du sol qui sera affichée sur la carte. Une valeur valide est comprise entre 0 et 63170000 mètres (rayon de la Terre multiplié par 10).
Attribut HTML :
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
Type : number optional
Angle maximal du cap (rotation) de la carte. Une valeur valide est comprise entre 0 et 360 degrés. minHeading et maxHeading représentent un intervalle de <= 360 degrés dans lequel les gestes de cap seront autorisés. minHeading = 180 et maxHeading = 90 autorisent les titres dans [0, 90] et [180, 360]. minHeading = 90 et maxHeading = 180 autoriseront l'en-tête dans [90, 180].
Attribut HTML :
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
Type : number optional
Angle d'incidence maximal de la carte. Une valeur valide est comprise entre 0 et 90 degrés.
Attribut HTML :
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
Type : number optional
Altitude minimale au-dessus du sol qui sera affichée sur la carte. Une valeur valide est comprise entre 0 et 63170000 mètres (rayon de la Terre multiplié par 10).
Attribut HTML :
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
Type : number optional
Angle minimal du cap (rotation) de la carte. Une valeur valide est comprise entre 0 et 360 degrés. minHeading et maxHeading représentent un intervalle de <= 360 degrés dans lequel les gestes de cap seront autorisés. minHeading = 180 et maxHeading = 90 autorisent les titres dans [0, 90] et [180, 360]. minHeading = 90 et maxHeading = 180 autoriseront l'en-tête dans [90, 180].
Attribut HTML :
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
Type : number optional
Angle d'incidence minimal de la carte. Une valeur valide est comprise entre 0 et 90 degrés.
Attribut HTML :
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
range
Type : number optional
Distance entre la caméra et le centre de la carte, en mètres.
Attribut HTML :
  • <gmp-map-3d range="number"></gmp-map-3d>
roll
Type : number optional
Inclinaison de la caméra autour du vecteur de vue, en degrés. Pour lever toute ambiguïté, en l'absence d'inclinaison, tout angle de roulis sera interprété comme un cap.
Attribut HTML :
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
Type : number optional
Inclinaison du vecteur de vue de la caméra en degrés. Un vecteur de vue pointant directement vers le bas aurait une inclinaison de zéro degré. Un vecteur de vue pointant loin de la Terre aurait une inclinaison de 180 degrés.
Attribut HTML :
  • <gmp-map-3d tilt="number"></gmp-map-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject L'objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet avec la méthode handleEvent.
  • options : boolean|AddEventListenerOptions optional. Consultez les options. Les événements personnalisés ne sont compatibles qu'avec capture et passive.
Valeur renvoyée : void
Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera distribué à la cible. Consultez addEventListener.
flyCameraAround
flyCameraAround(options)
Paramètres :
Valeur renvoyée : aucune
Cette méthode fait orbiter la caméra autour d'un emplacement donné pendant une durée donnée, en effectuant le nombre de tours indiqué pendant cette période.

 Par défaut, la caméra orbite dans le sens des aiguilles d'une montre. Si un nombre négatif est indiqué pour les tours, la caméra effectue une orbite dans le sens inverse des aiguilles d'une montre.

La méthode est asynchrone, car les animations ne peuvent démarrer qu'une fois que la carte a chargé une quantité minimale. La méthode renvoie une fois l'animation démarrée.

 Si le nombre de tours est nul, aucune rotation ne se produit et l'animation se termine immédiatement après son démarrage.
flyCameraTo
flyCameraTo(options)
Paramètres :
Valeur renvoyée : aucune
Cette méthode déplace la caméra de manière parabolique de l'emplacement actuel à un emplacement de fin donné sur une durée donnée.

La méthode est asynchrone, car les animations ne peuvent démarrer qu'une fois que la carte a chargé une quantité minimale. La méthode renvoie une fois l'animation démarrée.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne qui spécifie le type d'événement pour lequel supprimer un écouteur d'événement.
  • listener : EventListener|EventListenerObject L'écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • options : boolean|EventListenerOptions optional. Consultez les options.
Valeur renvoyée : void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener.
stopCameraAnimation
stopCameraAnimation()
Paramètres : aucun
Valeur renvoyée : aucune
Cette méthode arrête toute animation de survol en cours d'exécution. La caméra reste à l'endroit où elle se trouve au milieu de l'animation. Elle ne se téléporte pas au point final.

 La méthode est asynchrone, car les animations ne peuvent démarrer ou s'arrêter qu'une fois que la carte a chargé une quantité minimale. La méthode renvoie une valeur une fois l'animation arrêtée.
gmp-animationend
function(animationEndEvent)
Arguments : 
  • animationEndEvent : Event
Cet événement est déclenché lorsque l'animation de vol se termine. Cet événement se propage dans l'arborescence DOM.
gmp-centerchange
function(centerChangeEvent)
Arguments : 
  • centerChangeEvent : Event
Cet événement est déclenché lorsque la propriété "center" de Map3DElement change.
gmp-click
function(clickEvent)
Arguments : 
Cet événement est déclenché lorsque l'élément Map3DElement est cliqué.
gmp-headingchange
function(headingChangeEvent)
Arguments : 
  • headingChangeEvent : Event
Cet événement est déclenché lorsque la propriété d'en-tête de Map3DElement change.
gmp-rangechange
function(rangeChangeEvent)
Arguments : 
  • rangeChangeEvent : Event
Cet événement est déclenché lorsque la propriété "range" de Map3DElement change.
gmp-rollchange
function(rollChangeEvent)
Arguments : 
  • rollChangeEvent : Event
Cet événement est déclenché lorsque la propriété de roulis de Map3DElement change.
gmp-steadychange
function(steadyChangeEvent)
Arguments : 
Cet événement est déclenché lorsque l'état stable de Map3DElement change.
gmp-tiltchange
function(tiltChangeEvent)
Arguments : 
  • tiltChangeEvent : Event
Cet événement est déclenché lorsque la propriété d'inclinaison de Map3DElement change.

Interface Map3DElementOptions

Interface google.maps.maps3d.Map3DElementOptions

Objet Map3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un Map3DElement.
bounds optional
Consultez les Map3DElement.bounds.
center optional
Consultez les Map3DElement.center.
defaultLabelsDisabled optional
Type : boolean optional
Consultez les Map3DElement.defaultLabelsDisabled.
defaultUIDisabled optional
Type : boolean optional
Consultez les Map3DElement.defaultUIDisabled.
heading optional
Type : number optional
Consultez les Map3DElement.heading.
maxAltitude optional
Type : number optional
Consultez les Map3DElement.maxAltitude.
maxHeading optional
Type : number optional
Consultez les Map3DElement.maxHeading.
maxTilt optional
Type : number optional
Consultez les Map3DElement.maxTilt.
minAltitude optional
Type : number optional
Consultez les Map3DElement.minAltitude.
minHeading optional
Type : number optional
Consultez les Map3DElement.minHeading.
minTilt optional
Type : number optional
Consultez les Map3DElement.minTilt.
range optional
Type : number optional
Consultez les Map3DElement.range.
roll optional
Type : number optional
Consultez les Map3DElement.roll.
tilt optional
Type : number optional
Consultez les Map3DElement.tilt.

Interface FlyAroundAnimationOptions

Interface google.maps.maps3d.FlyAroundAnimationOptions

Options de personnalisation de l'animation FlyCameraAround.
camera
Point central vers lequel la caméra doit être orientée pendant l'animation d'orbite. Notez que l'orientation de la carte change lorsque la caméra orbite autour de ce point central.
durationMillis optional
Type : number optional
Durée de l'animation en millisecondes. Il s'agit de la durée totale de l'animation, et non de la durée d'une seule rotation.
rounds optional
Type : number optional
Nombre de tours à effectuer autour du centre pendant la durée indiquée. Cette option permet de contrôler la vitesse globale de rotation. Si vous transmettez un nombre négatif à "rounds", la caméra pivote dans le sens inverse des aiguilles d'une montre au lieu du sens par défaut (sens des aiguilles d'une montre).

Interface FlyToAnimationOptions

Interface google.maps.maps3d.FlyToAnimationOptions

Options de personnalisation de l'animation FlyCameraTo.
endCamera
Emplacement vers lequel la caméra doit pointer à la fin de l'animation.
durationMillis optional
Type : number optional
Durée de l'animation en millisecondes. Une durée de 0 téléporte la caméra directement à la position finale.

Interface CameraOptions

Interface google.maps.maps3d.CameraOptions

Objet CameraOptions utilisé pour définir les propriétés qui peuvent être définies sur un objet caméra. L'objet caméra peut être n'importe quel élément ayant une position de caméra, par exemple un état actuel de la carte ou un état d'animation futur demandé.
center optional
Consultez les Map3DElement.center.
heading optional
Type : number optional
Consultez les Map3DElement.heading.
range optional
Type : number optional
Consultez les Map3DElement.range.
roll optional
Type : number optional
Consultez les Map3DElement.roll.
tilt optional
Type : number optional
Consultez les Map3DElement.tilt.

Classe SteadyChangeEvent

Classe google.maps.maps3d.SteadyChangeEvent

Cet événement est créé à partir de la surveillance d'un état stable de Map3DElement. Cet événement se propage dans l'arborescence DOM.

Cette classe étend Event.

Accédez-y en appelant le const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
isSteady
Type : boolean
Indique si Map3DElement est stable (c'est-à-dire si tout le rendu de la scène actuelle est terminé) ou non.

Classe LocationClickEvent

Classe google.maps.maps3d.LocationClickEvent

Cet événement est créé lorsque l'utilisateur clique sur un Map3DElement.

Cette classe étend Event.

Accédez-y en appelant le const {LocationClickEvent} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
position
Type : LatLngAltitude optional
Latitude, longitude et altitude sous le curseur au moment de l'événement. Veuillez noter que les données renvoyées seront moins précises aux niveaux les plus généraux. De plus, l'altitude du fond marin peut être renvoyée pour la valeur d'altitude lorsque vous cliquez sur la surface de l'eau à partir de positions de caméra plus élevées. Cet événement se propage dans l'arborescence DOM.

Classe PlaceClickEvent

Classe google.maps.maps3d.PlaceClickEvent

Cet événement est créé lorsque l'utilisateur clique sur un Map3DElement.

Cette classe étend LocationClickEvent.

Accédez-y en appelant le const {PlaceClickEvent} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
placeId
Type : string
Identifiant de lieu de l'élément géographique de la carte.
Hérité : position
fetchPlace
fetchPlace()
Paramètres : aucun
Valeur renvoyée : Promise<Place>
Récupère un Place pour cet ID de lieu. Dans l'objet Place obtenu, la propriété "id" sera renseignée. Vous pourrez demander d'autres champs ultérieurement via Place.fetchFields(), sous réserve de l'activation et de la facturation normales de l'API Places. La promesse est rejetée en cas d'erreur lors de la récupération de Place.

Classe Marker3DElement

Classe google.maps.maps3d.Marker3DElement

Affiche une position sur une carte 3D. Notez que position doit être défini pour que Marker3DElement s'affiche.

Élément personnalisé :
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" size-preserved z-index="number"></gmp-marker-3d>

Cette classe étend HTMLElement.

Cette classe implémente Marker3DElementOptions.

Accédez-y en appelant le const {Marker3DElement} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
Marker3DElement
Marker3DElement([options])
Paramètres :
Crée un Marker3DElement avec les options spécifiées.
altitudeMode
Type : AltitudeMode optional
Par défaut : AltitudeMode.CLAMP_TO_GROUND
Spécifie comment le composant d'altitude de la position est interprété.
Attribut HTML :
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
Type : CollisionBehavior optional
Par défaut : CollisionBehavior.REQUIRED
Énumération spécifiant le comportement d'un Marker3DElement en cas de collision avec un autre Marker3DElement ou avec les libellés de la carte de base.
Attribut HTML :
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
Type : boolean optional
Par défaut : false
Indique si ce repère doit être dessiné ou non lorsqu'il est masqué. Le repère peut être masqué par la géométrie de la carte (par exemple, par des bâtiments).
Attribut HTML :
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Type : boolean optional
Par défaut : false
Indique si le repère doit être connecté au sol. Pour extruder un repère, altitudeMode doit être RELATIVE_TO_GROUND ou ABSOLUTE.
Attribut HTML :
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Type : string optional
Texte à afficher par ce repère.
Attribut HTML :
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
Emplacement de la pointe du marqueur. L'altitude est ignorée dans certains modes et est donc facultative.
sizePreserved
Type : boolean optional
Par défaut : false
Indique si ce repère doit conserver sa taille ou non, quelle que soit la distance de la caméra. Par défaut, le repère est mis à l'échelle en fonction de la distance par rapport à la caméra/de l'inclinaison.
Attribut HTML :
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Type : number optional
Le zIndex par rapport aux autres repères.
Attribut HTML :
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Tous les éléments personnalisés ajoutés directement à Marker3DElement seront insérés, mais seuls les éléments de types HTMLImageElement, SVGElement et PinElement seront utilisés pour dessiner les repères. Les autres éléments seront ignorés.
HTMLImageElement et SVGElement doivent être encapsulés dans un élément <template> avant d'être attribués à l'emplacement par défaut de Marker3DElement.

Les images et les SVG sont actuellement rastérisés avant d'être affichés dans la scène 3D. Par conséquent, le code HTML personnalisé intégré dans les SVG ou les classes CSS ajoutées aux images ne seront pas appliqués et ne seront peut-être pas reflétés lorsque les repères s'afficheront à l'écran.
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject L'objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet avec la méthode handleEvent.
  • options : boolean|AddEventListenerOptions optional. Consultez les options. Les événements personnalisés ne sont compatibles qu'avec capture et passive.
Valeur renvoyée : void
Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera distribué à la cible. Consultez addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne qui spécifie le type d'événement pour lequel supprimer un écouteur d'événement.
  • listener : EventListener|EventListenerObject L'écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • options : boolean|EventListenerOptions optional. Consultez les options.
Valeur renvoyée : void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener.

Marker3DElementOptions interface

Interface google.maps.maps3d.Marker3DElementOptions

Objet Marker3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un Marker3DElement.
altitudeMode optional
Type : AltitudeMode optional
Consultez les Marker3DElement.altitudeMode.
collisionBehavior optional
Type : CollisionBehavior optional
Consultez les Marker3DElement.collisionBehavior.
drawsWhenOccluded optional
Type : boolean optional
Consultez les Marker3DElement.drawsWhenOccluded.
extruded optional
Type : boolean optional
Consultez les Marker3DElement.extruded.
label optional
Type : string optional
Consultez les Marker3DElement.label.
position optional
Consultez les Marker3DElement.position.
sizePreserved optional
Type : boolean optional
Consultez les Marker3DElement.sizePreserved.
zIndex optional
Type : number optional
Consultez les Marker3DElement.zIndex.

Classe Marker3DInteractiveElement

Classe google.maps.maps3d.Marker3DInteractiveElement

Affiche une position sur une carte 3D. Notez que position doit être défini pour que Marker3DInteractiveElement s'affiche. Contrairement à Marker3DElement, Marker3DInteractiveElement reçoit un événement gmp-click.

Élément personnalisé :
<gmp-marker-3d-interactive></gmp-marker-3d-interactive>

Cette classe étend Marker3DElement.

Cette classe implémente Marker3DInteractiveElementOptions.

Accédez-y en appelant le const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Paramètres :
Crée un Marker3DInteractiveElement avec les options spécifiées.
Hérité : altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Tous les éléments personnalisés ajoutés directement à Marker3DInteractiveElement seront insérés, mais seuls les éléments de type PinElement seront utilisés pour dessiner les repères. Les autres éléments seront ignorés.
addEventListener
addEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject L'objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet avec la méthode handleEvent.
  • options : boolean|AddEventListenerOptions optional. Consultez les options. Les événements personnalisés ne sont compatibles qu'avec capture et passive.
Valeur renvoyée : void
Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera distribué à la cible. Consultez addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne qui spécifie le type d'événement pour lequel supprimer un écouteur d'événement.
  • listener : EventListener|EventListenerObject L'écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • options : boolean|EventListenerOptions optional Voir options
Valeur renvoyée : void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Voir removeEventListener
gmp-click
function(clickEvent)
Arguments : 
Cet événement est déclenché lorsque l'élément Marker3DInteractiveElement est cliqué.

Marker3DInteractiveElementOptions interface

Interface google.maps.maps3d.Marker3DInteractiveElementOptions

Objet Marker3DInteractiveElementOptions utilisé pour définir les propriétés pouvant être définies sur un Marker3DInteractiveElement.

Cette interface étend Marker3DElementOptions.

Hérité : altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Classe Model3DElement

Classe google.maps.maps3d.Model3DElement

Modèle 3D permettant le rendu des modèles glTF. Notez que position et src doivent être définis pour que Model3DElement s'affiche. Les propriétés de base du gLTF PBR doivent être acceptées.

Aucune extension ni propriété d'extension ne sont actuellement prises en charge.

Élément personnalisé :
<gmp-model-3d altitude-mode="absolute" src="src"></gmp-model-3d>

Cette classe étend HTMLElement.

Cette classe implémente Model3DElementOptions.

Accédez-y en appelant le const {Model3DElement} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
Model3DElement
Model3DElement([options])
Paramètres :
Crée un Model3DElement avec les options spécifiées.
altitudeMode
Type : AltitudeMode optional
Par défaut : AltitudeMode.CLAMP_TO_GROUND
Spécifie comment l'altitude dans la position est interprétée.
Attribut HTML :
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
Décrit la rotation du système de coordonnées d'un modèle 3D pour positionner le modèle sur la carte 3D. Les rotations

sont appliquées au modèle dans l'ordre suivant : roulis, inclinaison, puis cap.
position
Définit la position de Model3DElement. L'altitude est ignorée dans certains modes et est donc facultative.
scale
Type : number|Vector3D|Vector3DLiteral optional
Par défaut : 1
Met à l'échelle le modèle le long des axes x, y et z dans l'espace de coordonnées du modèle.
src
Type : string|URL optional
Spécifie l'URL du modèle 3D. Pour le moment, seuls les modèles au format .glb sont acceptés.

 Toutes les URL HTTP relatives seront converties en URL absolues correspondantes.

 Veuillez noter que si vous hébergez vos fichiers de modèle .glb sur un site Web ou un serveur différent de votre application principale, assurez-vous de configurer les en-têtes HTTP CORS appropriés. Cela permet à votre application d'accéder de manière sécurisée aux fichiers du modèle depuis l'autre domaine.
Attribut HTML :
  • <gmp-model-3d src="src"></gmp-model-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject L'objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet avec la méthode handleEvent.
  • options : boolean|AddEventListenerOptions optional. Consultez les options. Les événements personnalisés ne sont compatibles qu'avec capture et passive.
Valeur renvoyée : void
Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera distribué à la cible. Consultez addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne qui spécifie le type d'événement pour lequel supprimer un écouteur d'événement.
  • listener : EventListener|EventListenerObject L'écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • options : boolean|EventListenerOptions optional. Consultez les options.
Valeur renvoyée : void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener.

Interface Model3DElementOptions

Interface google.maps.maps3d.Model3DElementOptions

Objet Model3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un Model3DElement.
altitudeMode optional
Type : AltitudeMode optional
Consultez les Model3DElement.altitudeMode.
orientation optional
Consultez les Model3DElement.orientation.
position optional
Consultez les Model3DElement.position.
scale optional
Type : number|Vector3D|Vector3DLiteral optional
Consultez les Model3DElement.scale.
src optional
Type : string|URL optional
Consultez les Model3DElement.src.

Classe Polyline3DElement

Classe google.maps.maps3d.Polyline3DElement

Une polyligne 3D est une superposition linéaire de segments de ligne connectés sur une carte 3D.

Élément personnalisé :
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

Cette classe étend HTMLElement.

Cette classe implémente Polyline3DElementOptions.

Accédez-y en appelant le const {Polyline3DElement} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
Polyline3DElement
Polyline3DElement([options])
Paramètres :
Crée un Polyline3DElement avec les options spécifiées.
altitudeMode
Type : AltitudeMode optional
Par défaut : AltitudeMode.ABSOLUTE
Spécifie comment les composants d'altitude des coordonnées sont interprétés.
Attribut HTML :
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
coordinates
Séquence ordonnée des coordonnées de la polyligne. L'altitude est ignorée dans certains modes et est donc facultative.
drawsOccludedSegments
Type : boolean optional
Par défaut : false
Indique si les parties de la polyligne qui pourraient être masquées sont dessinées ou non. Les polylignes peuvent être masquées par la géométrie de la carte (par exemple, les bâtiments).
Attribut HTML :
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Type : boolean optional
Par défaut : false
Indique si la polyligne doit être connectée au sol. Pour extruder une polyligne, altitudeMode doit être RELATIVE_TO_GROUND ou ABSOLUTE.
Attribut HTML :
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Type : boolean optional
Par défaut : false
Lorsque la valeur est true, les arêtes de la polyligne sont interprétées comme géodésiques et suivent la courbure de la Terre. Lorsque la valeur est false, les bords de la polyligne sont affichés sous forme de lignes droites dans l'espace écran.
Attribut HTML :
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Type : string optional
Couleur extérieure. Toutes les couleurs CSS3 sont compatibles.
Attribut HTML :
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
Type : number optional
La largeur extérieure est comprise entre 0.0 et 1.0. Il s'agit d'un pourcentage de strokeWidth.
Attribut HTML :
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
strokeColor
Type : string optional
Couleur du trait. Toutes les couleurs CSS3 sont compatibles.
Attribut HTML :
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
Type : number optional
Épaisseur du trait, en pixels.
Attribut HTML :
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
Type : number optional
zIndex par rapport aux autres polygones.
Attribut HTML :
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject L'objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet avec la méthode handleEvent.
  • options : boolean|AddEventListenerOptions optional. Consultez les options. Les événements personnalisés ne sont compatibles qu'avec capture et passive.
Valeur renvoyée : void
Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera distribué à la cible. Consultez addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne qui spécifie le type d'événement pour lequel supprimer un écouteur d'événement.
  • listener : EventListener|EventListenerObject L'écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • options : boolean|EventListenerOptions optional. Consultez les options.
Valeur renvoyée : void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener.

Polyline3DElementOptions interface

Interface google.maps.maps3d.Polyline3DElementOptions

Objet Polyline3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un Polyline3DElement.
altitudeMode optional
Type : AltitudeMode optional
Consultez les Polyline3DElement.altitudeMode.
coordinates optional
Consultez les Polyline3DElement.coordinates.
drawsOccludedSegments optional
Type : boolean optional
Consultez les Polyline3DElement.drawsOccludedSegments.
extruded optional
Type : boolean optional
Consultez les Polyline3DElement.extruded.
geodesic optional
Type : boolean optional
Consultez les Polyline3DElement.geodesic.
outerColor optional
Type : string optional
Consultez les Polyline3DElement.outerColor.
outerWidth optional
Type : number optional
Consultez les Polyline3DElement.outerWidth.
strokeColor optional
Type : string optional
Consultez les Polyline3DElement.strokeColor.
strokeWidth optional
Type : number optional
Consultez les Polyline3DElement.strokeWidth.
zIndex optional
Type : number optional
Consultez les Polyline3DElement.zIndex.

Classe Polygon3DElement

Classe google.maps.maps3d.Polygon3DElement

Un polygone 3D (comme une polyligne 3D) définit une série de coordonnées connectées dans une séquence ordonnée. De plus, les polygones forment une boucle fermée et définissent une région remplie.

Élément personnalisé :
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

Cette classe étend HTMLElement.

Cette classe implémente Polygon3DElementOptions.

Accédez-y en appelant le const {Polygon3DElement} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
Polygon3DElement
Polygon3DElement([options])
Paramètres :
Crée un Polygon3DElement avec les options spécifiées.
altitudeMode
Type : AltitudeMode optional
Par défaut : AltitudeMode.ABSOLUTE
Spécifie comment les composants d'altitude des coordonnées sont interprétés.
Attribut HTML :
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
Type : boolean optional
Par défaut : false
Indique si les parties du polygone qui pourraient être masquées sont dessinées ou non. Les polygones peuvent être masqués par la géométrie de la carte (par exemple, les bâtiments).
Attribut HTML :
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Type : boolean optional
Par défaut : false
Indique si le polygone doit être connecté au sol. Pour extruder un polygone, altitudeMode doit être RELATIVE_TO_GROUND ou ABSOLUTE.
Attribut HTML :
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
Type : string optional
Couleur de remplissage. Toutes les couleurs CSS3 sont compatibles.
Attribut HTML :
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
Type : boolean optional
Par défaut : false
Lorsque la valeur est true, les arêtes du polygone sont interprétées comme géodésiques et suivent la courbure de la Terre. Lorsque la valeur est false, les bords du polygone sont affichés sous forme de lignes droites dans l'espace écran.
Attribut HTML :
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerCoordinates
Séquence ordonnée de coordonnées qui désigne une boucle fermée. Contrairement aux polylignes, un polygone peut se composer d'un ou de plusieurs chemins, ce qui crée plusieurs découpes à l'intérieur du polygone.
outerCoordinates
Séquence ordonnée de coordonnées qui désigne une boucle fermée. L'altitude est ignorée dans certains modes et est donc facultative.
strokeColor
Type : string optional
Couleur du trait. Toutes les couleurs CSS3 sont compatibles.
Attribut HTML :
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
Type : number optional
Épaisseur du trait, en pixels.
Attribut HTML :
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
Type : number optional
zIndex par rapport aux autres polygones.
Attribut HTML :
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject L'objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet avec la méthode handleEvent.
  • options : boolean|AddEventListenerOptions optional. Consultez les options. Les événements personnalisés ne sont compatibles qu'avec capture et passive.
Valeur renvoyée : void
Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera distribué à la cible. Consultez addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne qui spécifie le type d'événement pour lequel supprimer un écouteur d'événement.
  • listener : EventListener|EventListenerObject L'écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • options : boolean|EventListenerOptions optional. Consultez les options.
Valeur renvoyée : void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener.

Interface Polygon3DElementOptions

Interface google.maps.maps3d.Polygon3DElementOptions

Objet Polygon3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un Polygon3DElement.
altitudeMode optional
Type : AltitudeMode optional
Consultez les Polygon3DElement.altitudeMode.
drawsOccludedSegments optional
Type : boolean optional
Consultez les Polygon3DElement.drawsOccludedSegments.
extruded optional
Type : boolean optional
Consultez les Polygon3DElement.extruded.
fillColor optional
Type : string optional
Consultez les Polygon3DElement.fillColor.
geodesic optional
Type : boolean optional
Consultez les Polygon3DElement.geodesic.
innerCoordinates optional
Consultez les Polygon3DElement.innerCoordinates.
outerCoordinates optional
Consultez les Polygon3DElement.outerCoordinates.
strokeColor optional
Type : string optional
Consultez les Polygon3DElement.strokeColor.
strokeWidth optional
Type : number optional
Consultez les Polygon3DElement.strokeWidth.
zIndex optional
Type : number optional
Consultez les Polygon3DElement.zIndex.

Constantes AltitudeMode

google.maps.maps3d.AltitudeMode constantes

Spécifie comment les composants d'altitude des coordonnées sont interprétés.

Accédez-y en appelant le const {AltitudeMode} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
ABSOLUTE Permet d'exprimer des objets par rapport au niveau moyen de la mer. Cela signifie également que si le niveau de détail du terrain change sous l'objet, sa position absolue restera la même.
CLAMP_TO_GROUND Permet d'exprimer les objets placés au sol. Ils resteront au niveau du sol et suivront le terrain, quelle que soit l'altitude indiquée. Si l'objet est positionné au-dessus d'une étendue d'eau importante, il sera placé au niveau de la mer.
RELATIVE_TO_GROUND Permet d'exprimer des objets par rapport à la surface du sol. Si le niveau de détail du terrain change, la position de l'objet restera constante par rapport au sol. Au-dessus de l'eau, l'altitude est interprétée comme une valeur en mètres au-dessus du niveau de la mer.
RELATIVE_TO_MESH Permet d'exprimer des objets par rapport à la surface la plus élevée (sol, bâtiment ou eau). Lorsqu'il se trouve au-dessus de l'eau, il s'agit de la surface de l'eau. Lorsqu'il se trouve au-dessus du terrain, il s'agit de la surface du bâtiment (le cas échéant) ou de la surface du sol (en l'absence de bâtiments).