3D Maps

Classe Map3DElement

Classe google.maps.maps3d.Map3DElement

Map3DElement est une interface HTML pour la vue Plan en 3D.

Élément personnalisé:
<gmp-map-3d center="lat,lng,altitude" default-labels-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.

Pour y accéder, appelez const {Map3DElement} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

Map3DElement
Map3DElement([options])
Paramètres: 
bounds
Lorsque cette option est définie, la caméra n'est pas positionnée dans les limites de latitude/longitude spécifiées. Notez que les objets 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 respectivement les longitudes ouest et est de -180 et 180. Pour les limites de longitude uniquement, utilisez les latitudes nord et sud de 90 et -90, respectivement.
center
Centre de la carte indiqué en tant que LatLngAltitude, où l'altitude est exprimée en mètres au-dessus du sol. Notez que cet emplacement ne correspond pas nécessairement à 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 spécifié, la valeur par défaut est {lat: 0, lng: 0, altitude: 63170000}. L'altitude maximale autorisée est de 6 317 000 mètres (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>
heading
Type:number optional
Cap de la boussole sur la carte, en degrés, avec la valeur zéro pour le nord géographique. En l'absence d'inclinaison, les mouvements de roulis sont interprétés comme une direction.
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 d'orientation (rotation) de la carte. Une valeur valide est comprise entre 0 et 360 degrés. minHeading et maxHeading représentent un intervalle de moins de 360 degrés au cours duquel les gestes de cap sont autorisés. minHeading = 180 et maxHeading = 90 autoriseront l'orientation dans [0, 90] et l'orientation dans [180, 360]. minHeading = 90 et maxHeading = 180 autoriseront le titre 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
L'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 d'orientation (rotation) de la carte. Une valeur valide est comprise entre 0 et 360 degrés. minHeading et maxHeading représentent un intervalle de moins de 360 degrés au cours duquel les gestes de cap sont autorisés. minHeading = 180 et maxHeading = 90 autoriseront l'orientation dans [0, 90] et l'orientation dans [180, 360]. minHeading = 90 et maxHeading = 180 autoriseront le titre 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
Déroulement de la caméra autour du vecteur de vue, en degrés. Pour lever les ambiguïtés, en l'absence d'inclinaison, tous les roulis sont interprétés comme une direction.
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 orienté directement vers la Terre aurait une inclinaison de zéro degré. Un vecteur de vue pointant vers l'extérieur 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: 
  • typestring Chaîne sensible à la casse représentant le type d'événement à écouter.
  • listenerEventListener|EventListenerObject objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet utilisant la méthode handleEvent
  • optionsboolean|AddEventListenerOptions optional Voir 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é est envoyé à la cible. Découvrez addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres: 
  • typestring Chaîne spécifiant le type d'événement pour lequel supprimer un écouteur d'événements.
  • listenerEventListener|EventListenerObject Écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • optionsboolean|EventListenerOptions optional Voir les options
Valeur renvoyée:  void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener.
gmp-centerchange
function(centerChangeEvent)
Arguments: 
Cet événement est déclenché lorsque la propriété centrale de Map3DElement est modifiée.
gmp-click
function(clickEvent)
Arguments: 
Cet événement est déclenché lorsqu'un utilisateur clique sur l'élément Map3DElement.
gmp-headingchange
function(headingChangeEvent)
Arguments: 
Cet événement est déclenché lorsque la propriété d'en-tête de Map3DElement est modifiée.
gmp-rangechange
function(rangeChangeEvent)
Arguments: 
Cet événement est déclenché lorsque la propriété de plage de Map3DElement est modifiée.
gmp-rollchange
function(rollChangeEvent)
Arguments: 
Cet événement est déclenché lorsque la propriété "roll" de Map3DElement est modifiée.
gmp-steadychange
function(steadyChangeEvent)
Arguments: 
Cet événement est déclenché lorsque l'état stable de Map3DElement change.
gmp-tiltchange
function(tiltChangeEvent)
Arguments: 
Cet événement est déclenché lorsque la propriété d'inclinaison de Map3DElement est modifiée.

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
heading optional
Type:number optional
Consultez les Map3DElement.heading.
maxAltitude optional
Type:number optional
maxHeading optional
Type:number optional
maxTilt optional
Type:number optional
Consultez les Map3DElement.maxTilt.
minAltitude optional
Type:number optional
minHeading optional
Type:number optional
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.

Classe SteadyChangeEvent

Classe google.maps.maps3d.SteadyChangeEvent

Cet événement a été créé suite à la surveillance de l'état stable de Map3DElement.

Cette classe étend Event.

Pour y accéder, appelez const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

isSteady
Type:boolean
Indique si Map3DElement est stable (c'est-à-dire si le rendu de la scène en cours est terminé) ou non.

Classe ClickEvent

Classe google.maps.maps3d.ClickEvent

Cet événement est créé en cliquant sur un Map3DElement.

Cette classe étend Event.

Pour y accéder, appelez const {ClickEvent} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

position
Type:LatLngAltitude optional
Latitude/longitude/altitude qui se trouvaient sous le curseur lorsque l'événement s'est produit. Notez qu'à des niveaux plus grossiers, les données renvoyées seront moins précises. 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 depuis les positions plus élevées de la caméra.

Classe CenterChangeEvent

Classe google.maps.maps3d.CenterChangeEvent

Cet événement a été créé suite à la modification apportée au centre de surveillance le Map3DElement.

Cette classe étend Event.

Pour y accéder, appelez const {CenterChangeEvent} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

Classe HeadingChangeEvent

Classe google.maps.maps3d.HeadingChangeEvent

Cet événement est créé à partir de la surveillance du changement de cap le Map3DElement.

Cette classe étend Event.

Pour y accéder, appelez const {HeadingChangeEvent} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

Classe RangeChangeEvent

Classe google.maps.maps3d.RangeChangeEvent

Cet événement est créé suite à la modification de la plage de surveillance effectuée le Map3DElement.

Cette classe étend Event.

Pour y accéder, appelez const {RangeChangeEvent} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

Classe RollChangeEvent

Classe google.maps.maps3d.RollChangeEvent

Cet événement est créé à partir de la modification du roll de surveillance du Map3DElement.

Cette classe étend Event.

Pour y accéder, appelez const {RollChangeEvent} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

Classe TiltChangeEvent

Classe google.maps.maps3d.TiltChangeEvent

Cet événement est créé en surveillant les changements d'inclinaison sur Map3DElement.

Cette classe étend Event.

Pour y accéder, appelez const {TiltChangeEvent} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

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-opacity="number" outer-width="number" stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polyline-3d>

Cette classe étend HTMLElement.

Cette classe implémente Polyline3DElementOptions.

Pour y accéder, appelez const {Polyline3DElement} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

Polyline3DElement
Polyline3DElement([options])
Paramètres: 
altitudeMode
Type:AltitudeMode optional
Spécifie la manière dont les composants de l'altitude dans les 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 susceptibles d'être masquées sont tracé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 reliée au sol. Pour extruder une polyligne, la valeur de 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 bords de la polyligne sont interprétés comme une géodésique 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 à l'écran.
Attribut HTML:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Type:string optional
Couleur extérieure. Toutes les couleurs CSS3 sont compatibles, à l'exception des noms de couleurs étendus.
Attribut HTML:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerOpacity
Type:number optional
Opacité externe entre 0.0 et 1.0.
Attribut HTML:
  • <gmp-polyline-3d outer-opacity="number"></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 la métrique "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, à l'exception des noms de couleurs étendus.
Attribut HTML:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeOpacity
Type:number optional
Opacité du trait, entre 0.0 et 1.0.
Attribut HTML:
  • <gmp-polyline-3d stroke-opacity="number"></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 à d'autres zones d'intérêt.
Attribut HTML:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres: 
  • typestring Chaîne sensible à la casse représentant le type d'événement à écouter.
  • listenerEventListener|EventListenerObject objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet utilisant la méthode handleEvent
  • optionsboolean|AddEventListenerOptions optional Voir 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é est envoyé à la cible. Découvrez addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres: 
  • typestring Chaîne spécifiant le type d'événement pour lequel supprimer un écouteur d'événements.
  • listenerEventListener|EventListenerObject Écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • optionsboolean|EventListenerOptions optional Voir les options
Valeur renvoyée:  void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener.

Interface Polyline3DElementOptions

Interface google.maps.maps3d.Polyline3DElementOptions

Objet Polyline3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un élément Polyline3DElement.

altitudeMode optional
Type:AltitudeMode optional
coordinates optional
drawsOccludedSegments optional
Type:boolean optional
Par défaut:false
extruded optional
Type:boolean optional
Par défaut:false
geodesic optional
Type:boolean optional
Par défaut:false
outerColor optional
Type:string optional
outerOpacity optional
Type:number optional
outerWidth optional
Type:number optional
strokeColor optional
Type:string optional
strokeOpacity optional
Type:number optional
strokeWidth optional
Type:number optional
zIndex optional
Type:number optional

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 zone remplie.

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

Cette classe étend HTMLElement.

Cette classe implémente Polygon3DElementOptions.

Pour y accéder, appelez const {Polygon3DElement} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans l'API Maps JavaScript.

Polygon3DElement
Polygon3DElement([options])
Paramètres: 
altitudeMode
Type:AltitudeMode optional
Spécifie la manière dont les composants de l'altitude dans les 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 tracées ou non. Les polygones peuvent être masqués par la géométrie de la carte (ex. : 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 relié au sol. Pour extruder un polygone, la valeur de 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, à l'exception des noms de couleurs étendus.
Attribut HTML:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
fillOpacity
Type:number optional
Opacité de remplissage, comprise entre 0,0 et 1,0.
Attribut HTML:
  • <gmp-polygon-3d fill-opacity="number"></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 une géodésique 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 à l'é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 être constitué d'un ou de plusieurs tracés qui créent 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, à l'exception des noms de couleurs étendus.
Attribut HTML:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeOpacity
Type:number optional
Opacité du trait, entre 0.0 et 1.0.
Attribut HTML:
  • <gmp-polygon-3d stroke-opacity="number"></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 à d'autres zones d'intérêt.
Attribut HTML:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres: 
  • typestring Chaîne sensible à la casse représentant le type d'événement à écouter.
  • listenerEventListener|EventListenerObject objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet utilisant la méthode handleEvent
  • optionsboolean|AddEventListenerOptions optional Voir 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é est envoyé à la cible. Découvrez addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres: 
  • typestring Chaîne spécifiant le type d'événement pour lequel supprimer un écouteur d'événements.
  • listenerEventListener|EventListenerObject Écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • optionsboolean|EventListenerOptions optional Voir 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 élément Polygon3DElement.

altitudeMode optional
Type:AltitudeMode optional
drawsOccludedSegments optional
Type:boolean optional
Par défaut:false
extruded optional
Type:boolean optional
Par défaut:false
fillColor optional
Type:string optional
fillOpacity optional
Type:number optional
geodesic optional
Type:boolean optional
Par défaut:false
innerCoordinates optional
outerCoordinates optional
strokeColor optional
Type:string optional
strokeOpacity optional
Type:number optional
strokeWidth optional
Type:number optional
zIndex optional
Type:number optional

Constantes AltitudeMode

Constantes google.maps.maps3d.AltitudeMode

Spécifie la manière dont les composants de l'altitude dans les coordonnées sont interprétés.

Pour y accéder, appelez const {AltitudeMode} = await google.maps.importLibrary("maps3d"). Consultez Bibliothèques dans 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 relief change sous l'objet, sa position absolue reste la même.
CLAMP_TO_GROUND Permet d'exprimer des objets placés au sol. Ils restent au niveau du sol, quelle que soit l'altitude indiquée. Si l'objet est placé au-dessus d'une étendue d'eau, il sera placé au niveau de la mer.
RELATIVE_TO_GROUND Permet d'exprimer des objets par rapport à la surface au sol. Si le niveau de détail du relief change, la position de l'objet reste constante par rapport au sol. Lorsque vous passez 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 au niveau le plus élevé du sol, du bâtiment et de la surface de l'eau. Sur un plan d'eau, il s'agit de la surface de l'eau. Sur le terrain, il s'agit de la surface du bâtiment (le cas échéant) ou de la surface au sol (s'il n'y a pas de bâtiment).