Simboli (icone basate su vettori)

  1. Introduzione
  2. Proprietà di un simbolo
  3. Simboli predefiniti
  4. Aggiungere un simbolo a un indicatore
  5. Aggiungere un simbolo a una polilinea
  6. Animare un simbolo

Introduzione

Un Symbol è un'icona basata su vettori che può essere visualizzata su un oggetto Marker o Polyline. La forma del simbolo è definita da un percorso che utilizza la notazione del percorso SVG. Sebbene path sia l'unica proprietà obbligatoria, l'oggetto Symbol supporta una serie di proprietà che ti consentono di personalizzare gli aspetti visivi, come il colore e lo spessore del tratto e il riempimento. Consulta l'elenco delle proprietà.

Tramite la classe SymbolPath sono disponibili diversi simboli predefiniti. Consulta l'elenco di seguito.

Proprietà di un simbolo

Tieni presente che il comportamento predefinito di un Symbol varia leggermente a seconda che venga visualizzato su un indicatore o una polilinea. Queste variazioni sono descritte nell'elenco delle proprietà riportato di seguito.

Un Symbol supporta le seguenti proprietà:

  • path (obbligatorio) è il percorso che definisce la forma del simbolo. Puoi utilizzare uno dei percorsi predefiniti in google.maps.SymbolPath o definire un percorso personalizzato utilizzando la notazione del percorso SVG. Nota: i percorsi vettoriali su una polilinea devono rientrare in un quadrato di 22 x 22 px. Se il percorso include punti al di fuori di questo quadrato, devi modificare la proprietà scale del simbolo in un valore frazionario, ad esempio 0,2, in modo che i punti scalati risultanti rientrino nel quadrato.
  • anchor imposta la posizione del simbolo rispetto al marcatore o alla polilinea. Le coordinate del percorso del simbolo vengono traslate a sinistra e in alto rispettivamente dalle coordinate x e y dell'ancora. Per impostazione predefinita, un simbolo è ancorato a (0, 0). La posizione è espressa nello stesso sistema di coordinate del percorso del simbolo.
  • fillColor è il colore del riempimento del simbolo (ovvero la regione delimitata dal tratto). Sono supportati tutti i colori CSS3, ad eccezione dei colori denominati estesi. Per i simboli sui marcatori, il valore predefinito è "nero". Per i simboli sulle polilinee, il valore predefinito è il colore del tratto della polilinea corrispondente.
  • fillOpacity definisce l'opacità relativa (ovvero la mancanza di trasparenza) del riempimento del simbolo. I valori vanno da 0,0 (completamente trasparente) a 1,0 (completamente opaco). Il valore predefinito è 0.0.
  • rotation è l'angolo di rotazione del simbolo, espresso in senso orario in gradi. Per impostazione predefinita, un indicatore di simbolo ha una rotazione di 0 e un simbolo su una polilinea viene ruotato in base all'angolo del bordo su cui si trova. L'impostazione della rotazione di un simbolo su una polilinea corregge la rotazione del simbolo in modo che non segua più la curva della linea.
  • scale imposta l'importo in base al quale viene ridimensionato il simbolo. Per i marcatori di simboli, la scala predefinita è 1. Dopo il ridimensionamento, il simbolo può essere di qualsiasi dimensione. Per i simboli su una polilinea, la scala predefinita è lo spessore del tratto della polilinea. Dopo il ridimensionamento, il simbolo deve trovarsi all'interno di un quadrato di 22 x 22 px, centrato sull'ancoraggio del simbolo.
  • strokeColor è il colore del contorno del simbolo. Sono supportati tutti i colori CSS3, ad eccezione dei colori denominati estesi. Per i simboli sui marcatori, il valore predefinito è "nero". Per i simboli su una polilinea, il colore predefinito è il colore tratto della polilinea.
  • strokeOpacity determina l'opacità relativa (ovvero la mancanza di trasparenza) del tratto del simbolo. I valori vanno da 0,0 (completamente trasparente) a 1,0 (completamente opaco). Per i marcatori di simboli, il valore predefinito è 1.0. Per i simboli sulle polilinee, il valore predefinito è l'opacità del tratto della polilinea.
  • strokeWeight definisce lo spessore del contorno del simbolo. Il valore predefinito è scale del simbolo.

Simboli predefiniti

L'API Maps JavaScript fornisce alcuni simboli integrati che puoi aggiungere a indicatori o polilinee tramite la classe SymbolPath.

I simboli predefiniti includono un cerchio e due tipi di frecce. Sono disponibili frecce sia in avanti che indietro. Questo è particolarmente utile per le polilinee, perché l'orientamento di un simbolo su una polilinea è fisso. La direzione in avanti è considerata quella del capolinea della polilinea.

Puoi modificare il tratto o il riempimento dei simboli predefiniti utilizzando una delle opzioni predefinite per i simboli.

Sono inclusi i seguenti simboli predefiniti:

Nome Descrizione Esempio
google.maps.SymbolPath.CIRCLE Un cerchio.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Una freccia rivolta verso sinistra chiusa su tutti i lati.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Una freccia rivolta in avanti chiusa su tutti i lati.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Una freccia rivolta verso sinistra aperta su un lato.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Una freccia rivolta in avanti aperta su un lato.

Aggiungere un simbolo a un indicatore

Per visualizzare un'icona basata su vettori su un AdvancedMarkerElement, utilizza un elemento XML SVG. L'esempio seguente mostra come aggiungere un elemento XML SVG a un AdvancedMarkerElement.

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

JavaScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

Aggiungere un simbolo a una polilinea

Per visualizzare i simboli su una polilinea, imposta la proprietà icons[] dell'oggetto PolylineOptions. L'array icons[] accetta uno o più valori letterali dell'oggetto IconSequence, con le seguenti proprietà:

  • icon (obbligatorio) è il simbolo da visualizzare sulla riga.
  • offset determina la distanza dall'inizio della linea in cui deve essere visualizzata un'icona. Questa distanza può essere espressa come percentuale della lunghezza della linea (ad esempio, "50%") o in pixel (ad esempio, "50 px"). Il valore predefinito è "100%".
  • repeat determina la distanza tra le icone consecutive sulla linea. Questa distanza può essere espressa come percentuale della lunghezza della linea (ad esempio, "50%") o in pixel (ad esempio, "50 px"). Per disattivare la ripetizione dell'icona, specifica "0". Il valore predefinito è "0".

Con una combinazione di simboli e della classe PolylineOptions, hai un grande controllo sull'aspetto delle polilinee sulla mappa. Di seguito sono riportati alcuni esempi di personalizzazioni che puoi applicare.

Frecce

Utilizza la proprietà IconSequence.offset per aggiungere frecce all'inizio o alla fine della polilinea.

// 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
});

Visualizza esempio

Linee tratteggiate

Puoi ottenere un effetto tratteggiato impostando l'opacità della polilinea su 0 e sovrapponendo un simbolo opaco alla linea a intervalli regolari.

// 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
});

Visualizza esempio

Percorsi personalizzati

I simboli personalizzati ti consentono di aggiungere molte forme diverse a una polilinea.

// 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
  });

Visualizza esempio

Animare un simbolo

Puoi animare un simbolo lungo un percorso utilizzando la funzione window.setInterval() del DOM per modificare l'offset del simbolo a intervalli fissi.

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;
Visualizza esempio