Simboli (icone basate su vettori)

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.
  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'SymbolSymbol è un'icona basata su Vector 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 varietà di proprietà che consentono di personalizzare gli aspetti visivi, come il colore e lo spessore del tratto e del riempimento. Consulta l'elenco delle proprietà.

Sono disponibili diversi simboli predefiniti tramite la classe SymbolPath. Consulta l'elenco di seguito.

Proprietà di un simbolo

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

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 dei vettori su una polilinea devono rientrare in un quadrato di 22 x 22 px. Se il tuo percorso include punti al di fuori di questo quadrato, devi regolare la proprietà scale del simbolo su un valore frazionario, ad esempio 0,2, in modo che i punti scalati si trovino all'interno del quadrato.
  • anchor imposta la posizione del simbolo rispetto all'indicatore o alla polilinea. Le coordinate del percorso del simbolo vengono tradotte rispettivamente a sinistra e in alto dalle coordinate X e Y dell'ancoraggio. Per impostazione predefinita, il 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 l'area geografica delimitata dal tratto). Sono supportati tutti i colori CSS3, ad eccezione dei colori con nome estesi. Per i simboli sugli indicatori, 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 sono compresi tra 0,0 (completamente trasparente) e 1,0 (completamente opaco). Il valore predefinito è 0.0.
  • rotation è l'angolo di cui far ruotare il simbolo, espresso in senso orario in gradi. Per impostazione predefinita, un indicatore ha una rotazione di 0 e un simbolo su una polilinea viene ruotato dall'angolo del bordo su cui si trova. L'impostazione della rotazione di un simbolo su una polilinea determinerà la rotazione del simbolo in modo che non seguirà più la curva della linea.
  • scale consente di impostare l'entità in base alla quale il simbolo viene ridimensionato. Per gli indicatori, la scala predefinita è 1. Dopo aver ridimensionato il simbolo può essere di qualsiasi dimensione. Per i simboli su una polilinea, la bilancia predefinita è la ponderazione del tratto della polilinea. Dopo aver scalato, il simbolo deve trovarsi all'interno di un quadrato di 22 x 22 px, centrato nell'ancoraggio del simbolo.
  • strokeColor è il colore del contorno del simbolo. Sono supportati tutti i colori CSS3, ad eccezione di quelli con nome esteso. Per i simboli sugli indicatori, il valore predefinito è 'nero'. Per i simboli su una polilinea, il colore predefinito è il colore del tratto.
  • strokeOpacity determina l'opacità relativa (ovvero la mancanza di trasparenza) del tratto del simbolo. I valori sono compresi tra 0,0 (completamente trasparente) e 1,0 (completamente opaco). Per gli indicatori 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 è il simbolo 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 rivolte sia in avanti che all'indietro. Ciò è particolarmente utile per le polilinee, perché l'orientamento di un simbolo su una polilinea è fisso. È considerato come in avanti nella direzione del capolinea della polilinea.

Puoi modificare il tratto o il riempimento dei simboli predefiniti utilizzando una qualsiasi delle opzioni dei simboli predefiniti.

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 l'indietro chiusa su tutti i lati.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Una freccia che punta in avanti, chiusa su tutti i lati.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Una freccia che punta all'indietro su un lato.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Una freccia che punta in avanti aperta su un lato.

Aggiungere un simbolo a un indicatore

Per visualizzare un'icona basata su vettori su un indicatore, passa un valore letterale oggetto Symbol con il percorso desiderato alla proprietà icon dell'indicatore. L'esempio seguente utilizza la notazione del percorso SVG per creare un'icona personalizzata per un indicatore.

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

Prova Esempio

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 degli oggetti IconSequence, con le seguenti proprietà:

  • icon (obbligatorio) è il simbolo da visualizzare nella riga.
  • offset determina la distanza dall'inizio della linea alla quale deve essere visualizzata un'icona. Questa distanza può essere espressa come percentuale della lunghezza della riga (ad esempio'50%') o in pixel (ad esempio &&39;50px'). L'impostazione predefinita è '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 '50px'). Per disattivare la ripetizione dell'icona, specifica '0'. L'impostazione predefinita è '0'.

Grazie alla combinazione di simboli e classe PolylineOptions, hai molto controllo sull'aspetto delle polilinee sulla mappa. Di seguito sono riportati alcuni esempi di personalizzazioni applicabili.

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 l'esempio

Righe tratteggiate

Puoi ottenere un effetto di linea tratteggiata 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 l'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 l'esempio

Animazione di un simbolo

Puoi animare un simbolo lungo un percorso utilizzando la funzione window.setInterval() di 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 l'esempio

Prova Esempio