3D Maps

Map3DElement

google.maps.maps3d.Map3DElement class
extends HTMLElement
implements Map3DElementOptions
library "maps3d"

Map3DElement est une interface HTML pour la vue de carte 3D. Notez que mode doit être défini pour que le rendu de la carte 3D commence.

                  
<gmp-map-3d
  autofits-camera-animation="value-name"
  camera-position="lat,lng,altitude"
  center="lat,lng,altitude"
  default-ui-hidden
  description="string"
  fov="number"
  gesture-handling="value-name"
  heading="number"
  internal-usage-attribution-ids="id1 id2"
  map-id="string"
  max-altitude="number"
  max-heading="number"
  max-tilt="number"
  min-altitude="number"
  min-heading="number"
  min-tilt="number"
  mode="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>

const {Map3DElement} = await google.maps.importLibrary("maps3d");

Constructeur
Map3DElement	Map3DElement([options]) Paramètres : options : Map3DElementOptions optional

Propriétés
autofitsCameraAnimation attr: autofits-camera-animation	Remarque : Disponible uniquement dans le canal v=alpha. Type d'entrée : AutofitsCameraAnimation optional Type de sortie : AutofitsCameraAnimation optional Par défaut : none Animation à utiliser pour l'ajustement automatique de la caméra. Attribut HTML : autofits-camera-animation="value-name"
bounds	Type d'entrée : LatLngBounds|LatLngBoundsLiteral optional Type de sortie : LatLngBounds optional Lorsqu'elle est définie, elle 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 seulement l'une ou l'autre. 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.
cameraPosition attr: camera-position	Type d'entrée : LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Type de sortie : LatLngAltitude optional Position de la caméra, indiquée sous la forme d'un LatLngAltitude. Sera dérivé s'il est omis. Si center est omis, mais que cameraPosition est spécifié, center sera dérivé de cameraPosition.. Si les deux sont mis à jour dans la même boucle d'exécution, cameraPosition sera privilégié. Les champs cameraPosition et center peuvent être dérivés l'un de l'autre dans le contexte de l'orientation, de la plage, du roulis et de l'inclinaison partagés. Attribut HTML : camera-position="lat,lng,altitude"
center attr: center	Type d'entrée : LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Type de sortie : LatLngAltitude optional Centre de la carte, indiqué sous la forme d'un LatLngAltitude, où l'altitude est exprimée en mètres au-dessus du niveau moyen de la mer. Notez qu'il ne s'agit pas nécessairement de 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 : center="lat,lng,altitude"
defaultUIHidden attr: default-ui-hidden	Type d'entrée : boolean optional Type de sortie : boolean Par défaut : false Lorsque la valeur est true, tous les boutons de l'interface utilisateur par défaut sont masqués. Attribut HTML : default-ui-hidden
description attr: description	Type d'entrée : string optional Type de sortie : string optional Si elle est fournie, une description d'accessibilité (par exemple, pour une utilisation avec des lecteurs d'écran) sera ajoutée à la carte avec la valeur fournie. Attribut HTML : description="string"
fov attr: fov	Type d'entrée : number optional Type de sortie : number optional Spécifie le champ de vision vertical en degrés. Les valeurs valides sont comprises entre 5,0 et 80,0. Des valeurs plus élevées augmentent la zone visible, mais peuvent introduire une distorsion de perspective. Valeur par défaut : 35.0. Attribut HTML : fov="number"
gestureHandling attr: gesture-handling	Type d'entrée : GestureHandling optional Type de sortie : GestureHandling Par défaut : GestureHandling.GREEDY Contrôle le traitement des gestes coopératifs. Lorsque ce paramètre est défini sur COOPERATIVE, des touches de modification ou des gestes à deux doigts sont nécessaires pour faire défiler la carte. Lorsque ce paramètre est défini sur GREEDY, la page hôte ne peut pas être défilée à partir des événements utilisateur sur l'élément de carte. Lorsqu'elle est définie sur AUTO, la gestion des gestes est déterminée par la possibilité de faire défiler la page hôte. Attribut HTML : gesture-handling="value-name"
heading attr: heading	Type d'entrée : number optional Type de sortie : number optional Orientation de la boussole sur la carte, en degrés, où le nord géographique est égal à zéro. En l'absence d'inclinaison, tout roulis sera interprété comme un cap. Attribut HTML : heading="number"
internalUsageAttributionIds attr: internal-usage-attribution-ids	Type d'entrée : Iterable<string> optional Type de sortie : Array<string> optional Ajoute un ID d'attribution d'utilisation à l'initialiseur, ce qui aide Google à comprendre quelles bibliothèques et quels exemples sont utiles aux développeurs, comme l'utilisation d'une bibliothèque de regroupement de repères. Pour désactiver l'envoi de l'ID d'attribution d'utilisation, vous pouvez supprimer cette propriété en toute sécurité. Seules les valeurs uniques seront envoyées. Les modifications apportées à cette valeur après l'instanciation peuvent être ignorées. Attribut HTML : internal-usage-attribution-ids="id1 id2"
language	Type d'entrée : string optional Type de sortie : string optional Langue dans laquelle afficher la langue de la carte de base. La langue par défaut est celle demandée par le développeur lors du chargement de l'API Maps JavaScript.
mapId attr: map-id	Type d'entrée : string optional Type de sortie : string optional Spécifie un ID de carte qui sera utilisé pour récupérer le style de carte basé dans le cloud pour la carte. Attribut HTML : map-id="string"
maxAltitude attr: max-altitude	Type d'entrée : number optional Type de sortie : number optional Altitude maximale au-dessus du sol qui sera affichée sur la carte. La valeur valide est comprise entre 0 et 63170000 mètres (rayon de la Terre multiplié par 10). Attribut HTML : max-altitude="number"
maxHeading attr: max-heading	Type d'entrée : number optional Type de sortie : number optional Angle maximal de l'orientation (rotation) de la carte. La valeur doit être comprise entre 0 et 360 degrés. minHeading et maxHeading représentent un intervalle de <= 360 degrés dans lequel les mouvements de la tête seront autorisés. minHeading = 180 et maxHeading = 90 autoriseront le cap dans [0, 90] et le cap dans [180, 360]. minHeading = 90 et maxHeading = 180 permettront de se diriger vers [90, 180]. Attribut HTML : max-heading="number"
maxTilt attr: max-tilt	Type d'entrée : number optional Type de sortie : number optional Angle d'incidence maximal de la carte. La valeur doit être comprise entre 0 et 90 degrés. Attribut HTML : max-tilt="number"
minAltitude attr: min-altitude	Type d'entrée : number optional Type de sortie : number optional Altitude minimale au-dessus du sol qui sera affichée sur la carte. La valeur valide est comprise entre 0 et 63170000 mètres (rayon de la Terre multiplié par 10). Attribut HTML : min-altitude="number"
minHeading attr: min-heading	Type d'entrée : number optional Type de sortie : number optional Angle minimal de l'orientation (rotation) de la carte. La valeur doit être comprise entre 0 et 360 degrés. minHeading et maxHeading représentent un intervalle de <= 360 degrés dans lequel les mouvements de la tête seront autorisés. minHeading = 180 et maxHeading = 90 permettront de se diriger vers [0, 90] et [180, 360]. minHeading = 90 et maxHeading = 180 permettront de se diriger vers [90, 180]. Attribut HTML : min-heading="number"
minTilt attr: min-tilt	Type d'entrée : number optional Type de sortie : number optional Angle d'incidence minimal de la carte. La valeur doit être comprise entre 0 et 90 degrés. Attribut HTML : min-tilt="number"
mode attr: mode	Type d'entrée : MapMode optional Type de sortie : MapMode optional Spécifie le mode dans lequel la carte doit être affichée. Si elle n'est pas définie, la carte ne s'affiche pas. Attribut HTML : mode="value-name"
range attr: range	Type d'entrée : number optional Type de sortie : number optional Distance entre la caméra et le centre de la carte, en mètres. Attribut HTML : range="number"
region	Type d'entrée : string optional Type de sortie : string optional Région avec laquelle tenter d'afficher les points d'intérêt de la carte de base. La région par défaut est celle demandée par le développeur lors du chargement de l'API Maps JavaScript.
roll attr: roll	Type d'entrée : number optional Type de sortie : number optional Roulis de la caméra autour du vecteur de vue, en degrés. Pour lever toute ambiguïté, en l'absence d'inclinaison, tout roulis sera interprété comme un cap. Attribut HTML : roll="number"
tilt attr: tilt	Type d'entrée : number optional Type de sortie : number optional Inclinaison du vecteur de vue de la caméra en degrés. Un vecteur de vue pointant 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 : tilt="number"
defaultUIDisabled attr: default-ui-disabled	Obsolète : veuillez utiliser Map3DElement.defaultUIHidden à la place. Cette propriété sera supprimée dans une prochaine version. Type : boolean optional Par défaut : false Lorsque la valeur est true, tous les boutons de l'interface utilisateur par défaut sont désactivés. Ne désactive pas les commandes au clavier et par gestes. Attribut HTML : default-ui-disabled

Méthodes
flyCameraAround	flyCameraAround(options) Paramètres : options : FlyAroundAnimationOptions Valeur renvoyée : aucune Cette méthode fait tourner la caméra autour d'un emplacement donné pendant une durée donnée. L'animation peut être répétée le nombre de fois spécifié par FlyAroundAnimationOptions.repeatCount. La caméra se déplace dans le sens des aiguilles d'une montre. L'emplacement autour duquel l'orbite est effectuée est spécifié via CameraOptions.center. Il s'agit de l'emplacement qui s'affichera au centre de la fenêtre d'affichage pendant l'animation d'orbite, tandis que la caméra se déplace autour de lui. La méthode est asynchrone, car les animations ne peuvent démarrer qu'une fois qu'une quantité minimale de la carte a été chargée. La méthode est renvoyée une fois l'animation lancée. Si le nombre de FlyAroundAnimationOptions.repeatCount est égal à zéro, aucune rotation ne se produit et l'animation se termine immédiatement après son démarrage.
flyCameraTo	flyCameraTo(options) Paramètres : options : FlyToAnimationOptions Valeur renvoyée : aucune Cette méthode déplace la caméra de manière parabolique de l'emplacement actuel vers un emplacement de fin donné sur une durée donnée. La position finale peut être spécifiée via CameraOptions.cameraPosition, qui contrôle la position exacte de la caméra, ou via CameraOptions.center, qui contrôle le centre de la fenêtre d'affichage visible de la carte. La méthode est asynchrone, car les animations ne peuvent démarrer qu'une fois qu'une quantité minimale de données de la carte a été chargée. La méthode est renvoyée une fois l'animation lancée.
stopCameraAnimation	stopCameraAnimation() Paramètres : aucun Valeur renvoyée : aucune Cette méthode arrête toute animation de vol en cours d'exécution. La caméra reste là où elle se trouve au milieu de l'animation. Elle ne se téléporte pas au point d'arrivée. La méthode est asynchrone, car les animations ne peuvent démarrer ou s'arrêter qu'une fois que la carte a été chargée un minimum. La méthode renvoie une fois l'animation arrêtée.
Hérité : addEventListener, removeEventListener

Événements
gmp-animationend	function(animationEndEvent) Arguments : animationEndEvent : Event optional Cet événement est déclenché lorsque l'animation de vol se termine. Cet événement se propage dans l'arborescence DOM.
gmp-camerapositionchange	function(cameraPositionChangeEvent) Arguments : cameraPositionChangeEvent : Event optional Cet événement est déclenché lorsque la propriété cameraPosition de Map3DElement change.
gmp-centerchange	function(centerChangeEvent) Arguments : centerChangeEvent : Event optional Cet événement est déclenché lorsque la propriété "center" de Map3DElement change.
gmp-click	function(clickEvent) Arguments : clickEvent : LocationClickEvent|PlaceClickEvent optional Cet événement est déclenché lorsque l'utilisateur clique sur l'élément Map3DElement.
gmp-error	function(mapInitializationErrorEvent) Arguments : mapInitializationErrorEvent : Event optional Cet événement est déclenché lorsque l'initialisation de la carte échoue.
gmp-fovchange	function(fovChangeEvent) Arguments : fovChangeEvent : Event optional Cet événement est déclenché lorsque la propriété fov de Map3DElement change.
gmp-headingchange	function(headingChangeEvent) Arguments : headingChangeEvent : Event optional Cet événement est déclenché lorsque la propriété "heading" de Map3DElement change.
gmp-map-id-error	function(mapIdErrorEvent) Arguments : mapIdErrorEvent : Event optional Cet événement est déclenché lorsque la propriété mapId de Map3DElement n'est pas valide.
gmp-rangechange	function(rangeChangeEvent) Arguments : rangeChangeEvent : Event optional Cet événement est déclenché lorsque la propriété "range" de Map3DElement change.
gmp-rollchange	function(rollChangeEvent) Arguments : rollChangeEvent : Event optional Cet événement est déclenché lorsque la propriété "roll" de Map3DElement change.
gmp-steadychange	function(steadyChangeEvent) Arguments : steadyChangeEvent : SteadyChangeEvent optional Cet événement est déclenché lorsque l'état stable de Map3DElement change.
gmp-tiltchange	function(tiltChangeEvent) Arguments : tiltChangeEvent : Event optional Cet événement est déclenché lorsque la propriété "tilt" de Map3DElement change.

Interface Map3DElementOptions

google.maps.maps3d.Map3DElementOptions interface

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

Propriétés
autofitsCameraAnimation facultatif	Remarque : Disponible uniquement dans le canal v=alpha. Type : AutofitsCameraAnimation optional Consultez les Map3DElement.autofitsCameraAnimation.
bounds facultatif	Type : LatLngBounds|LatLngBoundsLiteral optional Consultez les Map3DElement.bounds.
cameraPosition facultatif	Type : LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Consultez les Map3DElement.cameraPosition.
center facultatif	Type : LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Consultez les Map3DElement.center.
defaultUIDisabled facultatif	Obsolète : veuillez utiliser Map3DElement.defaultUIHidden à la place. Cette propriété sera supprimée dans une prochaine version. Type : boolean optional Consultez les Map3DElement.defaultUIDisabled.
defaultUIHidden facultatif	Type : boolean optional Consultez les Map3DElement.defaultUIHidden.
description facultatif	Type : string optional Consultez les Map3DElement.description.
fov facultatif	Type : number optional Consultez les Map3DElement.fov.
gestureHandling facultatif	Type : GestureHandling optional Consultez les Map3DElement.gestureHandling.
heading facultatif	Type : number optional Consultez les Map3DElement.heading.
internalUsageAttributionIds facultatif	Type : Iterable<string> optional Consultez les Map3DElement.internalUsageAttributionIds.
language facultatif	Type : string optional Consultez les Map3DElement.language.
mapId facultatif	Type : string optional Consultez les Map3DElement.mapId.
maxAltitude facultatif	Type : number optional Consultez les Map3DElement.maxAltitude.
maxHeading facultatif	Type : number optional Consultez les Map3DElement.maxHeading.
maxTilt facultatif	Type : number optional Consultez les Map3DElement.maxTilt.
minAltitude facultatif	Type : number optional Consultez les Map3DElement.minAltitude.
minHeading facultatif	Type : number optional Consultez les Map3DElement.minHeading.
minTilt facultatif	Type : number optional Consultez les Map3DElement.minTilt.
mode facultatif	Type : MapMode optional Consultez les Map3DElement.mode.
range facultatif	Type : number optional Consultez les Map3DElement.range.
region facultatif	Type : string optional Consultez les Map3DElement.region.
roll facultatif	Type : number optional Consultez les Map3DElement.roll.
tilt facultatif	Type : number optional Consultez les Map3DElement.tilt.

MapMode

google.maps.maps3d.MapMode Bibliothèque de constantes
"maps3d"

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

Ces constantes peuvent également être utilisées comme des chaînes. En TypeScript, les littéraux de chaîne sont définis par le type MapModeString.

const {MapMode} = await google.maps.importLibrary("maps3d");

Constantes
HYBRID	Ce mode Plan affiche un calque transparent des rues principales sur des images satellites ou photoréalistes.
ROADMAP	Remarque : Disponible uniquement dans le canal v=alpha. Ce mode Plan affiche une carte routière normale.
SATELLITE	Ce mode affiche des images satellite ou photoréalistes, si elles sont disponibles.

GestureHandling

google.maps.maps3d.GestureHandling Bibliothèque de constantes
"maps3d"

Spécifie comment les événements de gestes doivent être gérés sur l'élément de carte.

Ces constantes peuvent également être utilisées comme des chaînes. En TypeScript, les littéraux de chaîne sont définis par le type GestureHandlingString.

const {GestureHandling} = await google.maps.importLibrary("maps3d");

Constantes
AUTO	Cela permet à la carte de choisir d'utiliser la gestion coopérative ou gourmande des gestes. Il s'agit du comportement par défaut s'il n'est pas spécifié. La carte passe alors en mode coopératif si elle domine son parent de défilement (généralement la page hôte) de sorte que l'utilisateur ne peut pas faire défiler la carte pour accéder à d'autres contenus.
COOPERATIVE	Cela force le mode coopératif, dans lequel des touches de modification ou des gestes à deux doigts sont nécessaires pour faire défiler la carte.
GREEDY	Cela force le mode gourmand, dans lequel la page hôte ne peut pas être défilée à partir des événements utilisateur sur l'élément de carte.

AutofitsCameraAnimation constantes

google.maps.maps3d.AutofitsCameraAnimation Bibliothèque de constantes
"maps3d"

Remarque : Disponible uniquement dans le canal v=alpha.

Spécifie le comportement de la caméra lorsqu'elle se déplace vers une nouvelle position pour se centrer en fonction des éléments enfants activés.

Ces constantes peuvent également être utilisées comme des chaînes. En TypeScript, les littéraux de chaîne sont définis par le type AutofitsCameraAnimationString.

const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");

Constantes
FLY_TO	Vole vers la nouvelle position.
NONE	S'aligne sur la nouvelle position sans animation.

Interface FlyAroundAnimationOptions

google.maps.maps3d.FlyAroundAnimationOptions interface

Options de personnalisation de l'animation FlyCameraAround.

Propriétés
camera	Type : CameraOptions Point central vers lequel la caméra doit être orientée pendant l'animation de l'orbite. Notez que l'orientation de la carte change à mesure que la caméra tourne autour de ce point central.
durationMillis facultatif	Type : number optional Durée d'un cycle d'animation en millisecondes.
repeatCount facultatif	Type : number optional Spécifie le nombre de répétitions d'une animation. Si le nombre est égal à zéro, l'animation se termine immédiatement après son démarrage. Si Number.Infinity est transmis, l'animation se répète indéfiniment.
rounds facultatif	Obsolète : veuillez utiliser FlyAroundAnimationOptions.repeatCount à la place. Type : number optional Nombre de tours à effectuer autour du centre pendant la durée donnée. Cela contrôle la vitesse globale de rotation. Si vous transmettez un nombre négatif à "rounds", la caméra tourne dans le sens inverse des aiguilles d'une montre au lieu du sens par défaut.

Interface FlyToAnimationOptions

google.maps.maps3d.FlyToAnimationOptions interface

Options de personnalisation de l'animation FlyCameraTo.

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

Interface CameraOptions

google.maps.maps3d.CameraOptions interface

Objet CameraOptions utilisé pour définir les propriétés pouvant être définies sur un objet Camera. L'objet caméra peut être n'importe quel élément ayant une position de caméra, par exemple l'état actuel de la carte ou l'état d'animation demandé pour l'avenir.

Propriétés
altitudeMode facultatif	Type : AltitudeMode optional Par défaut : AltitudeMode.ABSOLUTE Énumération spécifiant comment interpréter la valeur d'altitude de l'objet CameraOptions donné. Cela réutilise l'énumération AltitudeMode existante.
cameraPosition facultatif	Type : LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Consultez les Map3DElement.cameraPosition.
center facultatif	Type : LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Consultez les Map3DElement.center.
fov facultatif	Type : number optional Consultez les Map3DElement.fov.
heading facultatif	Type : number optional Consultez les Map3DElement.heading.
range facultatif	Type : number optional Consultez les Map3DElement.range.
roll facultatif	Type : number optional Consultez les Map3DElement.roll.
tilt facultatif	Type : number optional Consultez les Map3DElement.tilt.

Classe SteadyChangeEvent

google.maps.maps3d.SteadyChangeEvent class
extends Event
library "maps3d"

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

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");

Propriétés
isSteady	Type : boolean Indique si Map3DElement est stable (c'est-à-dire que l'affichage de la scène actuelle est terminé) ou non.

LocationClickEvent

google.maps.maps3d.LocationClickEvent class
extends Event
library "maps3d"

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

const {LocationClickEvent} = await google.maps.importLibrary("maps3d");

Propriétés

position

Type : LatLngAltitude optional Latitude/longitude/altitude sous le curseur au moment de l'événement. 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 des positions de caméra plus élevées. Cet événement se propage dans l'arborescence DOM.

Classe PlaceClickEvent

google.maps.maps3d.PlaceClickEvent class
extends LocationClickEvent
library "maps3d"

Cet événement est créé lorsqu'un utilisateur clique sur l'icône d'un lieu sur un Map3DElement. Pour empêcher l'affichage du popover par défaut, appelez la méthode preventDefault() sur cet événement afin d'empêcher qu'il ne soit géré par le Map3DElement.

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");

Propriétés
placeId	Type : string ID de lieu de l'élément géographique de la carte.
Hérité : position

Méthodes

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. Des champs supplémentaires peuvent être demandés 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 si une erreur s'est produite lors de la récupération de Place.