Symboles (icônes vectorielles)

  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

Introduction

Un Symbol est une icône vectorielle qui peut s'afficher sur un Marker ou un objet Polyline. La forme du symbole est définie par un tracé au format 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. Vous pouvez en consulter 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 tracé qui définit la forme du symbole. Vous pouvez utiliser l'un des tracés prédéfinis dans google.maps.SymbolPath ou définir un tracé personnalisé au format SVG. Remarque : les tracés vectoriels sur une polyligne doivent tenir dans un carré de 22 x 22 pixels. Si votre tracé inclut des points en dehors de ce carré, vous devez définir la propriété scale du symbole sur une valeur fractionnaire, par exemple "0.2", afin que les points ainsi ajustés se trouvent dans le carré.
  • anchor définit la 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. Par défaut, un symbole est ancré à (0, 0). La position du symbole est exprimée dans le même système de coordonnées que son tracé.
  • fillColor est la couleur de remplissage du symbole (c'est-à-dire la région bordée par le trait). Toutes les couleurs CSS3 sont compatibles, à l'exception des noms de couleurs étendus. Pour les symboles sur des repères, la couleur par défaut est le noir ('black'). Pour les symboles sur des polylignes, la couleur par défaut est celle du trait de la polyligne correspondante.
  • fillOpacity définit l'opacité relative (c'est-à-dire la non-transparence) du remplissage du symbole. Les valeurs sont comprises entre 0.0 (totalement transparent) et 1.0 (totalement opaque). La valeur par défaut est 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 symbole de repère est de 0 et la rotation d'un symbole de polyligne est définie par l'angle du bord sur lequel il s'appuie. Définir la rotation d'un symbole sur une polyligne maintient cette rotation de sorte qu'elle ne suive plus la courbe de la ligne.
  • scale définit la taille de l'ajustement du symbole. Pour les repères de symboles, l'ajustement 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'échelle par défaut est celle de l'épaisseur du trait de la polyligne. Après la mise à l'échelle, le symbole doit tenir dans un carré de 22 x 22 px centré sur l'ancre du symbole.
  • strokeColor est la couleur du contour du symbole. Toutes les couleurs CSS3 sont prises en charge, à l'exception des noms de couleurs étendus. Pour les symboles sur des repères, la couleur par défaut est le noir ('black'). Pour les symboles sur une polyligne, la couleur par défaut est celle du contour de la polyligne.
  • strokeOpacity détermine l'opacité relative (c'est-à-dire la non-transparence) du trait du symbole. Les valeurs sont comprises entre 0.0 (totalement transparent) et 1.0 (totalement opaque). Pour les repères de symboles, la valeur par défaut est de 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 le 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 pointant vers l'avant et vers l'arrière sont disponibles. Cela s'avère particulièrement utile pour les polylignes, parce que l'orientation d'un symbole sur une polyligne est fixe. On désigne par "l'avant" la direction finale de la polyligne.

Vous pouvez modifier le trait ou le remplissage des symboles prédéfinis en utilisant les options de symbole 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 repère

Pour afficher une icône basée sur les vecteurs sur un repère, transmettez un littéral d'objet Symbol avec le tracé souhaité à la propriété icon du repère. L'exemple suivant utilise le format de tracé 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: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.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(0, 20),
  };

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

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

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: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.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(0, 20),
  };

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

window.initMap = initMap;
index.js
Voir l'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 en pourcentage de la longueur 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 contrôler l'apparence des polylignes sur votre carte. Vous trouverez 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

Vous pouvez obtenir un effet de ligne en pointillés en définissant l'opacité de votre polyligne sur 0 et en plaçant en superposition un symbole opaque sur la ligne à des 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

Tracés 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;
index.ts

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;
index.js
Voir l'exemple

Essayer l'exemple