Classe Marker
Classe google.maps.Marker
Cette classe étend MVCObject
.
Accédez-y en appelant const {Marker} = await google.maps.importLibrary("marker")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constructeur | |
---|---|
Marker |
Marker([opts]) Paramètres:
Crée un repère avec les options spécifiées. Si une carte est spécifiée, le repère y est ajouté lors de la création. Notez que la position doit être définie pour que le repère s'affiche. |
Constantes | |
---|---|
MAX_ZINDEX |
Z-index maximal par défaut que l'API attribue à un repère. Vous pouvez définir un z-index plus élevé pour mettre un repère au premier plan. |
Méthodes | |
---|---|
getAnimation |
getAnimation() Paramètres:aucun
Valeur renvoyée:
Animation|null|undefined Récupère l'animation en cours d'exécution. |
getClickable |
getClickable() Paramètres:aucun
Valeur renvoyée:
boolean "True" si le repère est cliquable.Obtenez l'état de clicabilité du Marker . |
getCursor |
getCursor() Paramètres:aucun
Valeur renvoyée:
string|null|undefined Obtenez le type de curseur de la souris affiché lorsque vous pointez dessus. |
getDraggable |
getDraggable() Paramètres:aucun
Valeur renvoyée:
boolean "True" si le repère est déplaçable.Obtenez l'état de la possibilité de déplacer le Marker . |
getIcon |
getIcon() Paramètres:aucun
Obtenez l'icône de l' Marker . Consultez les MarkerOptions.icon . |
getLabel |
getLabel() Paramètres:aucun
Valeur renvoyée:
MarkerLabel|string|null|undefined Obtenez le libellé du Marker . Consultez les MarkerOptions.label . |
getMap |
getMap() Paramètres:aucun
Valeur renvoyée:
Map|StreetViewPanorama Récupérez la carte ou le panorama sur lesquels Marker est affiché. |
getOpacity |
getOpacity() Paramètres:aucun
Valeur renvoyée :
number|null|undefined : nombre compris entre 0,0 et 1,0.Obtenez l'opacité de Marker . |
getPosition |
getPosition() Paramètres:aucun
Valeur renvoyée:
LatLng|null|undefined Obtenez la position de l' Marker . |
getShape |
getShape() Paramètres:aucun
Valeur renvoyée:
MarkerShape|null|undefined Obtenez la forme de l' Marker utilisée pour l'interaction. Consultez MarkerOptions.shape et MarkerShape . |
getTitle |
getTitle() Paramètres:aucun
Valeur renvoyée:
string|null|undefined Obtenez le titre de l'info-bulle Marker . Consultez les MarkerOptions.title . |
getVisible |
getVisible() Paramètres:aucun
Valeur renvoyée:
boolean "True" si le repère est visible.Obtenez la visibilité de l' Marker . |
getZIndex |
getZIndex() Paramètres:aucun
Valeur renvoyée:
number|null|undefined Z-index du repère.Obtenez l'indice z de l'élément Marker . Consultez les MarkerOptions.zIndex . |
setAnimation |
setAnimation([animation]) Paramètres:
Valeur renvoyée:aucune
Lancez une animation. Toute animation en cours sera annulée. Les animations actuellement compatibles sont les suivantes: Animation.BOUNCE , Animation.DROP . Si vous transmettez null , toute animation s'arrête. |
setClickable |
setClickable(flag) Paramètres:
Valeur renvoyée:aucune
Indique si l'élément Marker est cliquable. |
setCursor |
setCursor([cursor]) Paramètres:
Valeur renvoyée:aucune
Définit le type de curseur de la souris affiché lorsque l'utilisateur pointe dessus. |
setDraggable |
setDraggable(flag) Paramètres:
Valeur renvoyée:aucune
Indique si l'élément Marker est déplaçable. |
setIcon |
setIcon([icon]) Valeur renvoyée:aucune
Définissez l'icône de l' Marker . Consultez les MarkerOptions.icon . |
setLabel |
setLabel([label]) Paramètres:
Valeur renvoyée:aucune
Définissez le libellé de l' Marker . Consultez les MarkerOptions.label . |
setMap |
setMap(map) Paramètres:
Valeur renvoyée:aucune
Affiche le Marker sur la carte ou le panorama spécifié. Si la carte est définie sur null , le repère est supprimé. |
setOpacity |
setOpacity([opacity]) Paramètres:
Valeur renvoyée:aucune
Définissez l'opacité de Marker . |
setOptions |
setOptions(options) Paramètres:
Valeur renvoyée:aucune
Définissez les options pour Marker . |
setPosition |
setPosition([latlng]) Paramètres:
Valeur renvoyée:aucune
Définissez la position de l' Marker . |
setShape |
setShape([shape]) Paramètres:
Valeur renvoyée:aucune
Définit la forme de l' Marker utilisée pour l'interaction. Consultez MarkerOptions.shape et MarkerShape . |
setTitle |
setTitle([title]) Paramètres:
Valeur renvoyée:aucune
Définissez le titre de l'info-bulle Marker . Consultez les MarkerOptions.title . |
setVisible |
setVisible(visible) Paramètres:
Valeur renvoyée:aucune
Définissez cette valeur si le Marker est visible. |
setZIndex |
setZIndex([zIndex]) Paramètres:
Valeur renvoyée:aucune
Définissez l'indice z de Marker . Consultez les MarkerOptions.zIndex . |
Hérité:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Événements | |
---|---|
animation_changed |
function() Arguments:aucun
Cet événement se déclenche lorsque la propriété d'animation Marker change. |
click |
function(event) Arguments:
Cet événement est déclenché lorsqu'un utilisateur clique sur l'icône Marker . |
clickable_changed |
function() Arguments:aucun
Cet événement est déclenché lorsque la propriété cliquable Marker change. |
contextmenu |
function(event) Arguments:
Cet événement est déclenché lorsque l'événement DOM contextmenu est déclenché sur le Marker . |
cursor_changed |
function() Arguments:aucun
Cet événement est déclenché lorsque la propriété du curseur Marker change. |
dblclick |
function(event) Arguments:
Cet événement est déclenché lorsqu'un utilisateur a effectué un double-clic sur l'icône Marker . |
drag |
function(event) Arguments:
Cet événement est déclenché à plusieurs reprises pendant que l'utilisateur fait glisser le Marker . |
dragend |
function(event) Arguments:
Cet événement se déclenche lorsque l'utilisateur arrête de faire glisser le Marker . |
draggable_changed |
function() Arguments:aucun
Cet événement est déclenché lorsque la propriété Marker draggable change. |
dragstart |
function(event) Arguments:
Cet événement est déclenché lorsque l'utilisateur commence à faire glisser l' Marker . |
flat_changed |
function() Arguments:aucun
Cet événement est déclenché lorsque la propriété flat de Marker change. |
icon_changed |
function() Arguments:aucun
Cet événement se déclenche lorsque la propriété d'icône Marker change. |
mousedown |
function(event) Arguments:
Cet événement est déclenché pour un mousedown sur le Marker . |
mouseout |
function(event) Arguments:
Cet événement se déclenche lorsque la souris quitte la zone de l'icône Marker . |
mouseover |
function(event) Arguments:
Cet événement se déclenche lorsque la souris entre dans la zone de l'icône Marker . |
mouseup |
function(event) Arguments:
Cet événement est déclenché pour un relâchement de la souris sur le Marker . |
position_changed |
function() Arguments:aucun
Cet événement se déclenche lorsque la propriété de position Marker change. |
shape_changed |
function() Arguments:aucun
Cet événement est déclenché lorsque la propriété de forme Marker change. |
title_changed |
function() Arguments:aucun
Cet événement se déclenche lorsque la propriété de titre Marker change. |
visible_changed |
function() Arguments:aucun
Cet événement est déclenché lorsque la propriété visible de Marker change. |
zindex_changed |
function() Arguments:aucun
Cet événement est déclenché lorsque la propriété zIndex de Marker change. |
|
function(event) Arguments:
Cet événement est déclenché pour un clic droit sur le Marker . |
Interface MarkerOptions
Interface google.maps.MarkerOptions
Objet MarkerOptions utilisé pour définir les propriétés pouvant être définies sur un repère.
Propriétés | |
---|---|
anchorPoint optional |
Type:
Point optional Décalage entre la position du repère et l'extrémité d'une InfoWindow ouverte avec le repère comme ancre. |
animation optional |
Type:
Animation optional Par défaut:
null Animation à lire lorsqu'un repère est ajouté à une carte. |
clickable optional |
Type:
boolean optional Par défaut:
true Si la valeur est true , le repère reçoit les événements tactiles et de souris. |
|
Type:
string|CollisionBehavior optional Par défaut:
null Définissez un comportement en cas de collision pour les repères sur les cartes vectorielles. |
crossOnDrag optional |
Type:
boolean optional Par défaut:
true Si la valeur est false , la croix qui s'affiche sous le repère lors du glissement est désactivée. |
cursor optional |
Type:
string optional Par défaut:
pointer Type de curseur de la souris à afficher lorsque l'utilisateur pointe sur l'élément. |
draggable optional |
Type:
boolean optional Par défaut:
false Si la valeur est true , le repère peut être déplacé. |
icon optional |
Icône au premier plan. Si une chaîne est fournie, elle est traitée comme si elle était un Icon avec la chaîne url . |
label optional |
Type:
string|MarkerLabel optional Par défaut:
null Ajoute un libellé au repère. Un libellé de repère est une lettre ou un nombre affiché à l'intérieur d'un repère. Le libellé peut être une chaîne ou un objet MarkerLabel . Si ce champ est fourni et que MarkerOptions.title ne l'est pas, un texte d'accessibilité (par exemple, à utiliser avec les lecteurs d'écran) est ajouté au repère avec le texte du libellé fourni. Veuillez noter que label n'est actuellement utilisé que pour le texte d'accessibilité des repères non optimisés. |
map optional |
Type:
Map|StreetViewPanorama optional Carte sur laquelle afficher le repère. La carte est nécessaire pour afficher le repère et peut être fournie avec Marker.setMap si elle n'a pas été fournie lors de la création du repère. |
opacity optional |
Type:
number optional Par défaut:1,0
Valeur comprise entre 0,0 (transparent) et 1,0 (opaque). |
optimized optional |
Type:
boolean optional L'optimisation permet d'améliorer les performances en affichant de nombreux repères sous la forme d'un seul élément statique. Cette fonctionnalité est utile lorsqu'un grand nombre de repères est requis. En savoir plus sur l'optimisation des repères |
position optional |
Type:
LatLng|LatLngLiteral optional Définit la position du repère. Un repère peut être créé, mais ne s'afficher que lorsque sa position est fournie (par exemple, par les actions ou les choix d'un utilisateur). Une position de repère peut être fournie avec Marker.setPosition si elle n'a pas été fournie lors de la création du repère. |
shape optional |
Type:
MarkerShape optional Définition de la région de la carte image utilisée pour le glisser-déposer/le clic. |
title optional |
Type:
string optional Par défaut:
undefined Texte de roulement. Si elle est fournie, une valeur de texte d'accessibilité (par exemple, pour les lecteurs d'écran) sera ajoutée au repère. Veuillez noter que title n'est actuellement utilisé que pour le texte d'accessibilité des repères non optimisés. |
visible optional |
Type:
boolean optional Par défaut:
true Si la valeur est true , le repère est visible. |
zIndex optional |
Type:
number optional Tous les repères sont affichés sur la carte par ordre de zIndex, les valeurs les plus élevées s'affichant devant les repères ayant des valeurs plus faibles. Par défaut, les repères sont affichés en fonction de leur position verticale à l'écran, les repères les plus bas apparaissant devant les repères situés plus haut. |
Constantes CollisionBehavior
Constantes google.maps.CollisionBehavior
Accédez-y en appelant const {CollisionBehavior} = await google.maps.importLibrary("marker")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constantes | |
---|---|
OPTIONAL_AND_HIDES_LOWER_PRIORITY |
Afficher le repère uniquement s'il n'en chevauche pas d'autres. Si deux repères de ce type se chevauchent, celui avec le zIndex le plus élevé est affiché. S'ils ont le même zIndex, celui dont la position verticale à l'écran est la plus basse est affiché. |
REQUIRED |
Le repère s'affiche toujours, quelle que soit la collision. Il s'agit du comportement par défaut. |
REQUIRED_AND_HIDES_OPTIONAL |
Le repère s'affiche toujours peu importe le cas de collision. Les repères ou libellés OPTIONAL_AND_HIDES_LOWER_PRIORITY qui chevauchent le repère sont masqués. |
Interface Icône
Interface google.maps.Icon
Structure représentant une image d'icône de repère.
Propriétés | |
---|---|
url |
Type:
string URL de l'image ou de la feuille de sprites. |
anchor optional |
Type:
Point optional Position à laquelle ancrer une image en fonction de l'emplacement du repère sur la carte. Par défaut, l'ancrage se trouve au centre du bas de l'image. |
labelOrigin optional |
Type:
Point optional Origine du libellé par rapport au coin supérieur gauche de l'image de l'icône, si un libellé est fourni par le repère. Par défaut, l'origine se trouve au centre de l'image. |
origin optional |
Type:
Point optional Position de l'image dans un sprite, le cas échéant. Par défaut, l'origine se trouve en haut à gauche de l'image (0, 0) . |
scaledSize optional |
Type:
Size optional Taille de l'ensemble de l'image après mise à l'échelle, le cas échéant. Utilisez cette propriété pour étirer/réduire une image ou un sprite. |
size optional |
Type:
Size optional Taille d'affichage du sprite ou de l'image. Lorsque vous utilisez des sprites, vous devez spécifier leur taille. Si la taille n'est pas fournie, elle sera définie lorsque l'image sera chargée. |
Interface MarkerLabel
Interface google.maps.MarkerLabel
Ces options spécifient l'apparence d'un libellé de repère. Un libellé de repère est une chaîne (souvent un seul caractère) qui s'affiche à l'intérieur du repère. Si vous l'utilisez avec un repère personnalisé, vous pouvez le repositionner avec la propriété labelOrigin
dans la classe Icon
.
Propriétés | |
---|---|
text |
Type:
string Texte à afficher dans le libellé. |
className optional |
Type:
string optional Valeur par défaut:
'' (chaîne vide)Propriété className de l'élément du libellé (équivalent à l'attribut de classe de l'élément). Vous pouvez ajouter plusieurs classes CSS séparées par des espaces. La couleur, la taille, l'épaisseur et la famille de la police ne peuvent être définies que via les autres propriétés de MarkerLabel . Les classes CSS ne doivent pas être utilisées pour modifier la position ni l'orientation du libellé (par exemple, à l'aide de translations et de rotations) si vous utilisez également la gestion des collisions des repères. |
color optional |
Type:
string optional Par défaut:
'black' Couleur du texte du libellé. |
fontFamily optional |
Type:
string optional Famille de polices du texte du libellé (équivalent à la propriété CSS "font-family"). |
fontSize optional |
Type:
string optional Par défaut:
'14px' Taille de police du texte du libellé (équivalent à la propriété CSS font-size). |
fontWeight optional |
Type:
string optional Épaisseur de police du texte du libellé (équivalent à la propriété CSS font-weight). |
Interface MarkerShape
Interface google.maps.MarkerShape
Cet objet définit la zone cliquable d'une image de repère. La forme se compose de deux propriétés (type
et coord
), qui définissent la région non transparente d'une image.
Propriétés | |
---|---|
coords |
Type:
Array<number> Le format de cet attribut dépend de la valeur de type et suit la spécification w3 AREA coords disponible sur http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords. L'attribut coords est un tableau d'entiers qui spécifie la position en pixels de la forme par rapport au coin supérieur gauche de l'image cible. Les coordonnées dépendent de la valeur de type comme suit: - circle : les coordonnées sont [x1,y1,r] ,où x1, y2 sont les coordonnées du centre du cercle et r est le rayon du cercle. - poly : les coordonnées sont [x1,y1,x2,y2...xn,yn] , où chaque paire x,y contient les coordonnées d'un sommet du polygone. - rect : coords est [x1,y1,x2,y2] , où x1,y1 sont les coordonnées de l'angle supérieur gauche du rectangle et x2,y2 sont les coordonnées de l'angle inférieur droit du rectangle. |
type |
Type:
string Décrit le type de forme et peut être circle , poly ou rect . |
Interface Symbol
Interface google.maps.Symbol
Décrit un symbole, qui consiste en un tracé vectoriel avec un style. Un symbole peut être utilisé comme icône d'un repère ou placé sur une polyligne.
Propriétés | |
---|---|
path |
Type:
SymbolPath|string Trajet du symbole, qui est un tracé de symbole intégré ou un tracé personnalisé exprimé à l'aide de la notation de tracé SVG. Obligatoire. |
anchor optional |
Type:
Point optional Par défaut:
google.maps.Point(0,0) Position du symbole par rapport au repère ou à la polyligne. Les coordonnées du tracé du symbole sont traduites vers la gauche et le haut par les coordonnées x et y de l'ancre, respectivement. La position est exprimée dans le même système de coordonnées que le tracé du symbole. |
fillColor optional |
Type:
string optional Couleur de remplissage du symbole. Toutes les couleurs CSS3 sont compatibles, à l'exception des noms de couleurs étendus. Pour les repères de symboles, la valeur par défaut est "black" (noir). Pour les symboles sur des polylignes, la couleur par défaut est celle du trait de la polyligne correspondante. |
fillOpacity optional |
Type:
number optional Par défaut:
0 Opacité du remplissage du symbole. |
labelOrigin optional |
Type:
Point optional Par défaut:
google.maps.Point(0,0) Origine du libellé par rapport à l'origine du tracé, si le libellé est fourni par le repère. L'origine est exprimée dans le même système de coordonnées que le tracé du symbole. Cette propriété n'est pas utilisée pour les symboles sur des polylignes. |
rotation optional |
Type:
number optional Par défaut:
0 Angle de rotation du symbole, exprimé en degrés dans le sens des aiguilles d'une montre. Un symbole dans un IconSequence où fixedRotation est false est pivoté par rapport à l'angle du bord sur lequel il repose. |
scale optional |
Type:
number optional Taille de l'ajustement du symbole. Pour les repères de symboles, la valeur par défaut est de 1. Après l'ajustement, le symbole peut avoir n'importe quelle taille. Pour les symboles sur une polyligne, l'épaisseur du trait de la polyligne est utilisée par défaut. Après la mise à l'échelle, le symbole doit tenir dans un carré de 22 pixels de côté centré sur l'ancre du symbole. |
strokeColor optional |
Type:
string optional Couleur du trait du symbole. Toutes les couleurs CSS3 sont compatibles, à l'exception des noms de couleurs étendus. Pour les repères de symboles, la valeur par défaut est "black" (noir). Pour les symboles sur une polyligne, la couleur par défaut est celle du trait de la polyligne. |
strokeOpacity optional |
Type:
number optional Opacité du trait du symbole. Pour les repères de symboles, cette valeur est définie par défaut sur 1. Pour les symboles sur une polyligne, l'opacité du trait de la polyligne est utilisée par défaut. |
strokeWeight optional |
Type:
number optional Valeur par défaut:
Symbol.scale du symbole.Épaisseur du trait du symbole. |
Constantes SymbolPath
Constantes google.maps.SymbolPath
Chemins de symboles intégrés.
Accédez-y en appelant const {SymbolPath} = await google.maps.importLibrary("core")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constantes | |
---|---|
BACKWARD_CLOSED_ARROW |
Flèche fermée orientée vers l'arrière |
BACKWARD_OPEN_ARROW |
Flèche ouverte orientée vers l'arrière |
CIRCLE |
Cercle |
FORWARD_CLOSED_ARROW |
Flèche fermée orientée vers l'avant |
FORWARD_OPEN_ARROW |
Flèche ouverte orientée vers l'avant |
Constantes d'animation
Constantes google.maps.Animation
Animations pouvant être diffusées sur un repère. Utilisez la méthode Marker.setAnimation
sur le repère ou l'option MarkerOptions.animation
pour lire une animation.
Accédez-y en appelant const {Animation} = await google.maps.importLibrary("marker")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constantes | |
---|---|
BOUNCE |
Le repère rebondit jusqu'à ce que l'animation soit arrêtée en appelant Marker.setAnimation avec null . |
DROP |
Le repère tombe du haut de la carte sur son lieu final. L'animation s'arrête une fois que le repère est au repos et Marker.getAnimation reprend la valeur null . Ce type d'animation est généralement spécifié lors de la création du repère. |