Classe Marker
Classe google.maps.Marker
Cette classe étend MVCObject.
Accédez-y en appelant const {Marker} = await google.maps.importLibrary("marker").
Consultez 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 construction. 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 attribuera à un repère. Vous pouvez définir un z-index plus élevé pour placer un repère au premier plan. |
Méthodes | |
|---|---|
getAnimation |
getAnimation()Paramètres : aucun
Valeur renvoyée :
Animation|null|undefinedRécupère l'animation en cours d'exécution. |
getClickable |
getClickable()Paramètres : aucun
Valeur de retour :
boolean "True" si le repère est cliquable.Obtenez l'état cliquable de Marker. |
getCursor |
getCursor()Paramètres : aucun
Valeur renvoyée :
string|null|undefinedObtenez le type de curseur de la souris affiché au survol. |
getDraggable |
getDraggable()Paramètres : aucun
Valeur renvoyée :
boolean True si le repère est déplaçable.Obtenir l'état de déplacement du Marker. |
getIcon |
getIcon()Paramètres : aucun
Obtenez l'icône de Marker. Consultez les MarkerOptions.icon. |
getLabel |
getLabel()Paramètres : aucun
Valeur renvoyée :
MarkerLabel|string|null|undefinedObtenez le libellé de Marker. Consultez les MarkerOptions.label. |
getMap |
getMap()Paramètres : aucun
Valeur renvoyée :
Map|StreetViewPanorama|nullObtenez la carte ou le panorama sur lequel le Marker est affiché. |
getOpacity |
getOpacity()Paramètres : aucun
Valeur de retour :
number|null|undefined Un nombre compris entre 0,0 et 1,0.Obtenez l'opacité de l'élément Marker. |
getPosition |
getPosition()Paramètres : aucun
Valeur renvoyée :
LatLng|null|undefinedObtenez la position de Marker. |
getShape |
getShape()Paramètres : aucun
Valeur renvoyée :
MarkerShape|null|undefinedObtenez la forme de l'élément Marker utilisé pour l'interaction. Consultez les MarkerOptions.shape et l'MarkerShape. |
getTitle |
getTitle()Paramètres : aucun
Valeur renvoyée :
string|null|undefinedObtenez le titre de l'info-bulle Marker. Consultez les MarkerOptions.title. |
getVisible |
getVisible()Paramètres : aucun
Valeur de retour :
boolean "True" si le repère est visible.Obtenez la visibilité de Marker. |
getZIndex |
getZIndex()Paramètres : aucun
Valeur renvoyée :
number|null|undefined zIndex du repère.Obtenez le zIndex de l'objet Marker. Consultez les MarkerOptions.zIndex. |
setAnimation |
setAnimation([animation])Paramètres :
Valeur renvoyée : aucune
Lancer une animation. Toute animation en cours sera annulée. Les animations actuellement compatibles sont Animation.BOUNCE et Animation.DROP. La transmission de null entraîne l'arrêt de toute animation. |
setClickable |
setClickable(flag)Paramètres :
Valeur renvoyée : aucune
Définissez si l'élément Marker est cliquable. |
setCursor |
setCursor([cursor])Paramètres :
Valeur renvoyée : aucune
Définissez le type de curseur de la souris affiché au survol. |
setDraggable |
setDraggable(flag)Paramètres :
Valeur renvoyée : aucune
Définissez si l'élément Marker est déplaçable. |
setIcon |
setIcon([icon])Valeur renvoyée : aucune
Définissez l'icône de Marker. Consultez les MarkerOptions.icon. |
setLabel |
setLabel([label])Paramètres :
Valeur renvoyée : aucune
Définissez l'étiquette de 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 sera 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 Marker. |
setShape |
setShape([shape])Paramètres :
Valeur renvoyée : aucune
Définissez la forme du Marker utilisé pour l'interaction. Consultez les MarkerOptions.shape et l'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 si Marker est visible. |
setZIndex |
setZIndex([zIndex])Paramètres :
Valeur renvoyée : aucune
Définissez le zIndex de Marker. Consultez les MarkerOptions.zIndex. |
Héritées :
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Événements | |
|---|---|
animation_changed |
function()Arguments : aucun
Cet événement est déclenché lorsque la propriété d'animation Marker change. |
click |
function(event)Arguments :
Cet événement est déclenché lorsque l'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 contextmenu du DOM est déclenché sur l'élément Marker. |
cursor_changed |
function()Arguments : aucun
Cet événement est déclenché lorsque la propriété Marker du curseur change. |
dblclick |
function(event)Arguments :
Cet événement est déclenché lorsque l'utilisateur double-clique sur l'icône Marker. |
drag |
function(event)Arguments :
Cet événement est déclenché de manière répétée pendant que l'utilisateur fait glisser l'élément Marker. |
dragend |
function(event)Arguments :
Cet événement est déclenché lorsque l'utilisateur arrête de faire glisser l'élément Marker. |
draggable_changed |
function()Arguments : aucun
Cet événement est déclenché lorsque la propriété Marker de l'élément déplaçable change. |
dragstart |
function(event)Arguments :
Cet événement est déclenché lorsque l'utilisateur commence à faire glisser l'élément Marker. |
flat_changed |
function()Arguments : aucun
Cet événement est déclenché lorsque la propriété Marker change. |
icon_changed |
function()Arguments : aucun
Cet événement est déclenché lorsque la propriété d'icône Marker change. |
mousedown |
function(event)Arguments :
Cet événement est déclenché lorsqu'un utilisateur appuie sur le bouton de la souris sur le Marker. |
mouseout |
function(event)Arguments :
Cet événement est déclenché lorsque la souris quitte la zone de l'icône Marker. |
mouseover |
function(event)Arguments :
Cet événement est déclenché lorsque la souris entre dans la zone de l'icône Marker. |
mouseup |
function(event)Arguments :
Cet événement est déclenché pour un mouseup sur le Marker. |
position_changed |
function()Arguments : aucun
Cet événement est déclenché 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 est déclenché 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é par un clic droit sur le Marker. |
Interface MarkerOptions
google.maps.MarkerOptions
interface
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 optionalDécalage entre la position du repère et l'extrémité d'une InfoWindow ouverte avec le repère comme ancrage. |
animation optional |
Type :
Animation optionalPar défaut :
nullAnimation à lire lorsqu'un repère est ajouté à une carte. |
clickable optional |
Type :
boolean optionalPar défaut :
trueSi la valeur est true, le repère reçoit les événements tactiles et de souris. |
|
Type :
string|CollisionBehavior optionalPar défaut :
nullDéfinissez un comportement en cas de collision pour les repères sur les cartes vectorielles. |
crossOnDrag optional |
Type :
boolean optionalPar défaut :
trueSi la valeur est false, désactive la croix qui s'affiche sous le repère lors du déplacement. |
cursor optional |
Type :
string optionalPar défaut :
pointerType de curseur de souris à afficher lorsque l'utilisateur pointe sur l'élément. |
draggable optional |
Type :
boolean optionalPar défaut :
falseSi la valeur est true, le repère peut être déplacé. Remarque : Si vous définissez cette option sur true, le repère sera cliquable même si clickable est défini sur false. |
icon optional |
Icône du premier plan. Si une chaîne est fournie, elle est traitée comme s'il s'agissait d'un Icon avec la chaîne comme url. |
label optional |
Type :
string|MarkerLabel optionalPar défaut :
nullAjoute 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, pour une utilisation avec des lecteurs d'écran) sera 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 optionalCarte sur laquelle afficher le repère. La carte est requise pour afficher le repère et peut être fournie avec Marker.setMap si elle n'est pas fournie lors de la construction du repère. |
opacity optional |
Type :
number optionalPar défaut : 1.0
Nombre compris entre 0,0 (transparent) et 1,0 (opaque). |
optimized optional |
Type :
boolean optionalL'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 Remarque : Cette optimisation n'a aucun effet sur les repères des cartes vectorielles. |
position optional |
Type :
LatLng|LatLngLiteral optionalDéfinit la position du repère. Un repère peut être créé, mais ne pas s'afficher tant que sa position n'est pas fournie (par exemple, par les actions ou les choix d'un utilisateur). La position d'un repère peut être fournie avec Marker.setPosition si elle n'est pas fournie lors de la construction du repère. |
shape optional |
Type :
MarkerShape optionalDéfinition de la région de l'image cliquable utilisée pour le glisser/cliquer. |
title optional |
Type :
string optionalPar défaut :
undefinedTexte de roulement. S'il est fourni, un texte d'accessibilité (par exemple, pour une utilisation avec des lecteurs d'écran) sera ajouté au repère avec la valeur fournie. Veuillez noter que title n'est actuellement utilisé que pour le texte d'accessibilité des repères non optimisés. |
visible optional |
Type :
boolean optionalPar défaut :
trueSi la valeur est true, le repère est visible. |
zIndex optional |
Type :
number optionalTous les repères sont affichés sur la carte dans l'ordre de leur zIndex, les valeurs les plus élevées s'affichant devant les repères avec des valeurs plus faibles. Par défaut, les repères sont affichés en fonction de leur position verticale à l'écran. Les repères situés plus bas s'affichent devant ceux situés plus haut. |
Constantes CollisionBehavior
google.maps.CollisionBehavior
constantes
Accédez-y en appelant const {CollisionBehavior} = await google.maps.importLibrary("marker").
Consultez 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 s'affiche. |
REQUIRED |
Toujours afficher le repère, quelle que soit la collision. Il s'agit du comportement par défaut. |
REQUIRED_AND_HIDES_OPTIONAL |
Toujours afficher le repère, quelle que soit la collision, et masquer les repères ou libellés OPTIONAL_AND_HIDES_LOWER_PRIORITY qui le chevauchent. |
Interface Icon
google.maps.Icon
interface
Structure représentant une image d'icône de repère.
Propriétés | |
|---|---|
url |
Type :
stringURL de l'image ou de la feuille de sprites. |
anchor optional |
Type :
Point optionalPosition à laquelle ancrer une image par rapport à l'emplacement du repère sur la carte. Par défaut, l'ancrage est situé au centre du bas de l'image. |
labelOrigin optional |
Type :
Point optionalOrigine du libellé par rapport à l'angle supérieur gauche de l'image de l'icône, si un libellé est fourni par le repère. Par défaut, l'origine est située au centre de l'image. |
origin optional |
Type :
Point optionalLa position de l'image dans un sprite, le cas échéant. Par défaut, l'origine se trouve dans l'angle supérieur gauche de l'image (0, 0). |
scaledSize optional |
Type :
Size optionalTaille de l'image entière 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 optionalTaille 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 lors du chargement de l'image. |
MarkerLabel
google.maps.MarkerLabel
interface
Ces options spécifient l'apparence d'une étiquette 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 :
stringTexte à afficher dans l'étiquette. |
className optional |
Type :
string optionalPar défaut :
'' (chaîne vide)Propriété className de l'élément du libellé (équivalente à l'attribut class 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 ou l'orientation du libellé (par exemple, en utilisant des translations et des rotations) si vous utilisez également la gestion des collisions de repères. |
color optional |
Type :
string optionalPar défaut :
'black'La couleur du texte du libellé. |
fontFamily optional |
Type :
string optionalFamille de polices du texte du libellé (équivalent à la propriété CSS "font-family"). |
fontSize optional |
Type :
string optionalPar défaut :
'14px'Taille de police du texte du libellé (équivalente à la propriété CSS font-size). |
fontWeight optional |
Type :
string optionalÉpaisseur de la police du texte du libellé (équivalent à la propriété CSS font-weight). |
Interface MarkerShape
google.maps.MarkerShape
interface
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 | |
|---|---|
type |
Type :
stringDécrit le type de la forme. Il peut s'agir de circle, poly ou rect. |
coords optional |
Type :
Array<number> optionalLe 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 à l'angle 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 : coords est [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. |
Interface Symbol
google.maps.Symbol
interface
Décrit un symbole, qui se compose d'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|stringLe tracé du symbole, qui est un tracé de symbole intégré, ou un tracé personnalisé exprimé au format SVG. Obligatoire. |
anchor optional |
Type :
Point optionalPar 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 du symbole est exprimée dans le même système de coordonnées que son tracé. |
fillColor optional |
Type :
string optionalCouleur 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". Pour les symboles sur des polylignes, la couleur par défaut est celle du trait de la polyligne correspondante. |
fillOpacity optional |
Type :
number optionalPar défaut :
0Opacité du remplissage du symbole. |
labelOrigin optional |
Type :
Point optionalPar 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 optionalPar défaut :
0Angle 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 s'appuie. |
scale optional |
Type :
number optionalTaille 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, la valeur par défaut est l'épaisseur du trait de la polyligne. Après la mise à l'échelle, le symbole doit tenir dans un carré de 22 pixels centré sur l'ancre du symbole. |
strokeColor optional |
Type :
string optionalCouleur 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". Pour les symboles sur une polyligne, la couleur par défaut est celle du contour de la polyligne. |
strokeOpacity optional |
Type :
number optionalOpacité du trait du symbole. Pour les repères de symboles, la valeur par défaut est de 1. Pour les symboles sur une polyligne, la valeur par défaut est l'opacité du trait de la polyligne. |
strokeWeight optional |
Type :
number optionalPar défaut :
Symbol.scale du symbole.Épaisseur du trait du symbole. |
Constantes SymbolPath
google.maps.SymbolPath
constantes
Chemins d'accès aux symboles intégrés.
Accédez-y en appelant const {SymbolPath} = await google.maps.importLibrary("core").
Consultez 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
google.maps.Animation
constantes
Animations pouvant être lues sur un repère. Utilisez la méthode Marker.setAnimation sur Marker ou l'option MarkerOptions.animation pour lire une animation.
Accédez-y en appelant const {Animation} = await google.maps.importLibrary("marker").
Consultez 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 renvoie null. Ce type d'animation est généralement spécifié à la création du repère. |