Symboles (icônes vectorielles)

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
  1. Introduction
  2. Propriétés d'un symbole
  3. Symboles prédéfinis
  4. Ajouter un symbole à un repère
  5. Ajouter un symbole à une polyligne
  6. Animer un symbole

Présentation

Un Symbol est une icône basée sur les données vectorielles qui peut être affichée sur un objet Marker ou Polyline. La forme du symbole est définie par un chemin utilisant la notation du chemin SVG. Bien que path soit la seule propriété obligatoire, l'objet Symbol accepte de nombreuses propriétés vous permettant de personnaliser les aspects visuels, comme la couleur et l'épaisseur du trait et du remplissage. Consultez la liste des propriétés.

Plusieurs symboles prédéfinis sont disponibles via la classe SymbolPath. Consultez la liste ci-dessous.

Propriétés d'un symbole

Notez que le comportement par défaut d'une propriété Symbol varie légèrement selon qu'elle apparaît sur un repère ou sur une polyligne. Ces différences sont décrites dans la liste des propriétés ci-dessous.

Un Symbol est compatible avec les propriétés suivantes:

  • path (obligatoire) correspond au chemin d'accès qui définit la forme du symbole. Vous pouvez utiliser l'un des chemins prédéfinis dans google.maps.SymbolPath ou définir un chemin personnalisé à l'aide de la notation de chemin SVG. Remarque: Les trajets vectoriels sur une polyligne doivent correspondre à un carré de 22 x 22 pixels. Si votre chemin inclut des points en dehors de ce carré, vous devez ajuster la propriété scale du symbole sur une valeur fractionnaire, telle que 0.2, afin que les points ajustés résultants s'intègrent bien au carré.
  • anchor définit la position du symbole par rapport au repère ou à la polyligne. Les coordonnées du symbole sont traduites vers la gauche et vers le haut par les coordonnées x et y de l'ancre. Par défaut, un symbole est ancré à (0, 0). La position est exprimée dans le même système de coordonnées que le tracé du symbole.
  • fillColor est la couleur du remplissage du symbole (c'est-à-dire la région bordée par le trait). Toutes les couleurs CSS3 sont prises en charge, à l'exception des noms de couleurs étendus. Pour les symboles sur des repères, la valeur par défaut est 'black'. Pour les symboles sur des polylignes, la valeur par défaut est la couleur de trait de la polyligne correspondante.
  • fillOpacity définit l'opacité relative (c'est-à-dire le manque de transparence) du remplissage du symbole. Les valeurs sont comprises entre 0 (entièrement transparent) et 1 (totalement opaque). Par défaut, l'opacité est définie sur 0.0.
  • rotation est l'angle de rotation du symbole, exprimé en degrés dans le sens des aiguilles d'une montre. Par défaut, la rotation d'un repère de symbole est de 0, et le symbole d'une polyligne est tourné selon l'angle de l'arête sur laquelle il se trouve. Définir la rotation d'un symbole sur une polyligne corrige la rotation du symbole de sorte qu'il ne suive plus la courbe de la ligne.
  • scale définit la taille du symbole. Pour les repères de symboles, l'échelle par défaut est de 1. Après la mise à l'échelle, le symbole peut avoir n'importe quelle taille. Pour les symboles sur une polyligne, l'échelle par défaut correspond à l'épaisseur du trait de la polyligne. Après la mise à l'échelle, le symbole doit se trouver dans un carré de 22 x 22 pixels, centré au centre de l'ancre du symbole.
  • strokeColor est la couleur du contour du symbole. Toutes les couleurs CSS3 sont acceptées, à l'exception des couleurs étendues. Pour les symboles sur des repères, la valeur par défaut est 'black'. Pour les symboles sur une polyligne, la couleur par défaut est la couleur de trait de la polyligne.
  • strokeOpacity détermine l'opacité relative (c'est-à-dire le manque de transparence) du trait du symbole. Les valeurs sont comprises entre 0 (entièrement transparent) et 1 (totalement opaque). Pour les repères de symboles, la valeur par défaut est 1.0. Pour les symboles sur des polylignes, la valeur par défaut est l'opacité du trait de la polyligne.
  • strokeWeight définit l'épaisseur du contour du symbole. La valeur par défaut est scale du symbole.

Symboles prédéfinis

L'API Maps JavaScript fournit des symboles intégrés que vous pouvez ajouter aux repères ou aux polylignes via la classe SymbolPath.

Les symboles par défaut incluent un cercle et deux types de flèches. Des flèches avant et arrière sont disponibles. Cela est particulièrement utile pour les polylignes, car l'orientation d'un symbole sur une polyligne est fixe. La ligne avant est considérée comme direction du terminus de la polyligne.

Vous pouvez modifier le trait ou le remplissage des symboles prédéfinis à l'aide de l'une des options de symboles par défaut.

Les symboles prédéfinis suivants sont inclus :

Nom Description Exemple
google.maps.SymbolPath.CIRCLE Cercle.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Flèche fermée sur tous les côtés orientée vers l'arrière.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Flèche fermée sur tous les côtés orientée vers l'avant.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Flèche ouverte d'un côté orientée vers l'arrière.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Flèche ouverte d'un côté orientée vers l'avant.

Ajouter un symbole à un marqueur

Pour afficher une icône basée sur les vecteurs sur un repère, transmettez un littéral d'objet Symbol avec le chemin d'accès souhaité à la propriété icon du repère. L'exemple suivant utilise la notation du chemin SVG afin de créer une icône personnalisée pour un repère.

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
Voir un exemple

Essayer l'exemple

Ajouter un symbole à une polyligne

Pour afficher des symboles sur une polyligne, définissez la propriété icons[] de l'objet PolylineOptions. Le tableau icons[] utilise un ou plusieurs littéraux d'objets IconSequence, avec les propriétés suivantes:

  • icon (obligatoire) correspond au symbole à afficher sur la ligne.
  • offset détermine la distance à partir du début de la ligne à laquelle une icône doit être affichée. Cette distance peut être exprimée en pourcentage de la longueur de la ligne (par exemple, '50%') ou en pixels (par exemple, '50px'). La valeur par défaut est '100%'.
  • repeat détermine la distance entre des icônes consécutives sur la ligne. Cette distance peut être exprimée sous forme de pourcentage de la ligne (par exemple, '50%') ou en pixels (par exemple, '50px'). Pour désactiver la répétition de l'icône, spécifiez '0'. La valeur par défaut est '0'.

En combinant des symboles et la classe PolylineOptions, vous pouvez exercer un contrôle important sur l'apparence des polylignes de votre carte. Veuillez trouver ci-dessous quelques exemples de personnalisations à appliquer.

Flèches

Utilisez la propriété IconSequence.offset pour ajouter des flèches au début ou à la fin de votre polyligne.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Voir un exemple

Lignes en pointillés

Pour obtenir un effet de ligne en pointillés, définissez l'opacité de la polyligne sur 0, puis superposez un symbole opaque sur la ligne à intervalles réguliers.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Voir un exemple

Chemins personnalisés

Les symboles personnalisés vous permettent d'ajouter de nombreuses formes différentes à une polyligne.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Voir un exemple

Animer un symbole

Vous pouvez animer un symbole le long d'un tracé à l'aide de la fonction window.setInterval() du DOM pour modifier le décalage du symbole à intervalles fixes.

TypeScript

// This example adds an animated symbol to a polyline.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 20.291, lng: 153.027 },
      zoom: 6,
      mapTypeId: "terrain",
    }
  );

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.291, lng: 153.027 },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

window.initMap = initMap;
Voir un exemple

Essayer l'exemple