Simboli (icone vettoriali)

  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. Applicare l'animazione a un simbolo

Introduzione

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

Sono disponibili diversi simboli predefiniti tramite la SymbolPath . Consulta l'elenco riportato 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 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 google.maps.SymbolPath oppure definisci un percorso personalizzato utilizzando 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 esterni al quadrato, devi regolare della 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 all'indicatore o una polilinea. Le coordinate del percorso del simbolo sono traslate verso sinistra e verso l'alto rispettivamente dalle coordinate x e y dell'ancoraggio. Per impostazione predefinita, un simbolo ancorato a (0, 0). La posizione è espressa nella stessa sistema di coordinate come percorso del simbolo.
  • fillColor è il colore di riempimento del simbolo (che rappresenta la regione delimitata dal tratto). Sono supportati tutti i colori CSS3, ad eccezione dei colori con nome esteso. Per i simboli sugli indicatori, il valore predefinito è "nero". Per simboli su 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, l'indicatore di simboli ruota 0 e un simbolo su una polilinea viene ruotato dall'angolo del bordo su cui bugie. Impostando la rotazione di un simbolo su una polilinea si correggerà la rotazione del simbolo il simbolo in modo che non segua più la curva della linea.
  • scale imposta la quantità di scala per il simbolo. Per gli indicatori di simboli, la scala predefinita è 1. Dopo il ridimensionamento, il simbolo può essere di di qualsiasi dimensione. Per i simboli su una polilinea, la scala predefinita è lo spessore del tratto la polilinea. Dopo il ridimensionamento, il simbolo deve trovarsi all'interno di un quadrato di 22 x 22 px al centro dell'ancora del simbolo.
  • strokeColor è il colore del contorno del simbolo. Tutti i CSS3 sono supportati i colori, ad eccezione dei colori con nome esteso. Per i simboli sugli indicatori, il valore predefinito è "black". Per i simboli su una polilinea, il colore predefinito è il colore del 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 gli indicatori di simboli, il valore predefinito è 1,0. Per i simboli sulle polilinee, l'impostazione predefinita è l'opacità del tratto polilinea.
  • strokeWeight definisce il peso del contorno del simbolo. La Il valore predefinito è scale del simbolo.

Simboli predefiniti

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

I simboli predefiniti includono un cerchio e due tipi di frecce. Entrambi in avanti e frecce rivolte all'indietro. Ciò è particolarmente utile per polilinee, perché l'orientamento di un simbolo su una polilinea è fisso. La modalità di inoltro è considerata come la direzione del capolinea del polilinea.

Puoi modificare il tratto o il riempimento dei simboli predefiniti utilizzando uno dei opzioni per i 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 all'indietro 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 all'indietro 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 una indicatore, passare un Valore letterale oggetto Symbol con il percorso desiderato dell'indicatore icon proprietà. L'esempio seguente utilizza 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: "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
Visualizza esempio

Prova Sample

Aggiungere un simbolo a una polilinea

Per visualizzare simboli su una polilinea, imposta la proprietà icons[] di l'oggetto PolylineOptions. L'array icons[] richiede uno o più Valori letterali oggetto IconSequence, con quanto segue proprietà:

  • icon (obbligatorio) è il simbolo su cui eseguire il rendering la linea.
  • 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 es. "50%") o in pixel (ad ad esempio "50px"). Il valore predefinito è "100%".
  • repeat determina la distanza tra icone consecutive su la linea. Questa distanza può essere espressa come percentuale della lunghezza della linea (ad es. "50%") o in pixel (ad es. "50 px"). Per disattivare la ripetizione dell'icona, specifica "0". Il valore predefinito è "0".
di Gemini Advanced.

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

Frecce

Utilizza la proprietà IconSequence.offset per aggiungere frecce alla l'inizio o la 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 linea tratteggiata impostando l'opacità della polilinea a 0 e sovrapporre un simbolo opaco alla linea in corrispondenza intervalli.

// 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 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

Animazione di un simbolo

Puoi animare un simbolo lungo un percorso utilizzando Funzione window.setInterval() 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;
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
Visualizza esempio

Prova Sample