3D Maps

Classe Map3DElement

Classe google.maps.maps3d.Map3DElement

Map3DElement est une interface HTML pour la vue de carte 3D. Notez que mode doit être défini pour que la carte 3D commence à s'afficher.

Élément personnalisé :
<gmp-map-3d center="lat,lng,altitude" default-ui-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="hybrid" 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>
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>
mode
Type : MapMode optional
Spécifie un mode dans lequel la carte doit être affichée. Si elle n'est pas définie, la carte ne sera pas affichée.
Attribut HTML :
  • <gmp-map-3d mode="hybrid"></gmp-map-3d>
  • <gmp-map-3d mode="satellite"></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.
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.
mode optional
Type : MapMode optional
Consultez les Map3DElement.mode.
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.

Constantes MapMode

google.maps.maps3d.MapMode constantes

Spécifie un mode dans lequel la carte doit être affichée.

Accédez-y en appelant le const {MapMode} = await google.maps.importLibrary("maps3d").
 Consultez Bibliothèques de l'API Maps JavaScript.
HYBRID Ce mode d'affichage superpose une couche transparente des principales rues sur des images satellites ou photoréalistes.
SATELLITE Ce mode d'affichage de la carte affiche des images satellite ou photoréalistes, le cas échéant.

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