Symbole (vektorbasierte Symbole)

  1. Einführung
  2. Eigenschaften von Symbolen
  3. Vordefinierte Symbole
  4. Symbole zu Markierungen hinzufügen
  5. Symbole zu Polylinien hinzufügen
  6. Symbole animieren

Einführung

Ein Symbol ist ein vektorbasiertes Symbol, das auf Marker- oder Polyline-Objekten angezeigt werden kann. Die Form des Symbols wird durch einen Pfad in der SVG-Pfadnotation definiert. path ist die einzige erforderliche Eigenschaft. Das Symbol-Objekt unterstützt jedoch auch viele andere Eigenschaften, mit denen sich visuelle Aspekte wie die Farbe und Stärke des Strichs und die Füllung anpassen lassen. Die Liste der Eigenschaften finden Sie hier.

Über die Klasse SymbolPath sind mehrere vordefinierte Symbole verfügbar. Hier finden Sie die entsprechende Liste.

Eigenschaften von Symbolen

Das Standardverhalten eines Symbol-Objekts variiert geringfügig, je nachdem, ob es auf einer Markierung oder Polylinie verwendet wird. Die Abweichungen sind in der Liste der Eigenschaften unten beschrieben.

Ein Symbol unterstützt die folgenden Eigenschaften:

  • path (erforderlich) ist der Pfad, der die Form des Symbols definiert. Sie können einen der vordefinierten Pfade in google.maps.SymbolPath verwenden oder einen benutzerdefinierten Pfad mit der SVG-Pfadnotation definieren. Hinweis: Vektorpfade auf einer Polylinie müssen in ein 22 × 22 Pixel großes Quadrat passen. Wenn Ihr Pfad Punkte außerhalb dieses Quadrats umfasst, müssen Sie die Eigenschaft scale des Symbols als Bruchwert angeben (z. B. „0.2“), damit die resultierenden skalierten Punkte in das Quadrat passen.
  • anchor definiert die Position des Symbols relativ zur Markierung oder Polylinie. Die Koordinaten des Symbolpfads werden um die x- und y-Koordinaten des Ankers nach links bzw. nach oben verschoben. Standardmäßig ist ein Symbol bei (0, 0) verankert. Die Position wird im selben Koordinatensystem ausgedrückt wie der Pfad des Symbols.
  • fillColor ist die Farbe der Füllung des Symbols, das heißt der vom Strich umgebene Bereich. Alle CSS3-Farben werden unterstützt, mit Ausnahme von Farben mit erweiterten Namen. Für Symbole auf Markierungen ist der Standardwert „black“. Für Symbole auf Polylinien entspricht die Standardfarbe der Strichfarbe der jeweiligen Polylinie.
  • fillOpacity definiert die relative Deckkraft (fehlende Transparenz) der Füllung des Symbols. Die Werte reichen von „0.0“ (völlig transparent) bis „1.0“ (völlig undurchsichtig). Der Standardwert ist „0.0“.
  • rotation ist der Winkel, um den das Symbol gedreht werden soll. Der Wert wird im Uhrzeigersinn in Grad ausgedrückt. Bei Markierungen liegt er standardmäßig bei 0. Bei Polylinien wird das Symbol um den Winkel des Rands gedreht, an dem es liegt. Wenn Sie die Rotation eines Symbols auf einer Polylinie festlegen, wird die Rotation so fixiert, dass das Symbol nicht mehr der Linienführung folgt.
  • scale definiert den Wert für die Skalierung der Symbolgröße. Für Symbolmarkierungen ist der Standardwert „1“. Nach der Skalierung kann das Symbol eine beliebige Größe haben. Für Symbole auf Polylinien entspricht die Standardskalierung der Strichstärke der entsprechenden Polylinie. Nach der Skalierung muss das Symbol innerhalb eines Quadrats von 22 × 22 Pixel liegen, dessen Mittelpunkt der Anker des Symbols ist.
  • strokeColor ist die Farbe des Umrisses des Symbols. Alle CSS3-Farben werden unterstützt, mit Ausnahme von Farben mit erweiterten Namen. Für Symbole auf Markierungen ist der Standardwert „black“. Für Symbole auf Polylinien entspricht die Standardfarbe der Strichfarbe der Polylinie.
  • strokeOpacity definiert die relative Deckkraft (die fehlende Transparenz) des Strichs des Symbols. Die Werte reichen von „0.0“ (völlig transparent) bis „1.0“ (völlig undurchsichtig). Für Symbolmarkierungen ist der Standardwert „1.0“. Für Symbole auf Polylinien entspricht der Standardwert der Strichdeckkraft der Polylinie.
  • strokeWeight definiert die Stärke des Umrisses des Symbols. Der Standardwert ist der scale-Wert des Symbols.

Vordefinierte Symbole

Die Google Maps JavaScript API bietet einige integrierte Symbole, die Sie über die Klasse SymbolPath zu Markierungen oder Polylinien hinzufügen können.

Zu den Standardsymbolen gehören ein Kreis sowie Vorwärts- und Rückwärtspfeile. Dies ist insbesondere bei Polylinien hilfreich, da die Ausrichtung eines Symbols dort unveränderlich ist. Vorwärtspfeile zeigen in die Richtung des Endpunkts der Polylinie.

Sie können die Strichstärke oder die Füllung vordefinierter Symbole mithilfe der vorhandenen Standardsymboloptionen ändern.

Folgende vordefinierte Symbole sind verfügbar:

Name Beschreibung Beispiel
google.maps.SymbolPath.CIRCLE Ein Kreis
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Ein Rückwärtspfeil, der auf allen Seiten geschlossen ist
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Ein Vorwärtspfeil, der auf allen Seiten geschlossen ist
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Ein Rückwärtspfeil, der auf einer Seite offen ist
google.maps.SymbolPath.FORWARD_OPEN_ARROW Ein Vorwärtspfeil, der auf einer Seite offen ist

Symbole zu Markierungen hinzufügen

Um ein vektorbasiertes Symbol auf einer Markierung anzuzeigen, übergeben Sie ein Symbol-Objektliteral mit dem gewünschten Pfad an die Eigenschaft icon der Markierung. Im folgenden Beispiel wird die SVG-Pfadnotation verwendet, um ein benutzerdefiniertes Symbol für eine Markierung zu erstellen.

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
Beispiel ansehen

Testbeispiel

Symbole zu Polylinien hinzufügen

Um Symbole auf einer Polylinie anzuzeigen, müssen Sie die Eigenschaft icons[] des PolylineOptions-Objekts festlegen. Das icons[]-Array kann ein oder mehrere IconSequence-Objektliterale mit folgenden Eigenschaften enthalten:

  • icon (erforderlich) ist das Symbol, das auf der Linie gerendert werden soll.
  • offset definiert den Abstand vom Anfang der Linie, in dem ein Symbol gerendert werden soll. Er kann als Prozentsatz der Linienlänge (z. B. „50 %“) oder in Pixeln (z. B. „50 px“) ausgedrückt werden. Der Standardwert ist „100 %“.
  • repeat definiert den Abstand zwischen zwei aufeinanderfolgenden Symbolen auf der Linie. Er kann als Prozentsatz der Linienlänge (z. B. „50 %“) oder in Pixeln (z. B. „50 px“) ausgedrückt werden. Wenn das Symbol nicht wiederholt werden soll, geben Sie „0“ an. Der Standardwert ist „0“.

Mit einer Kombination aus Symbolen und der Klasse PolylineOptions lässt sich die Darstellung und das Verhalten von Polylinien auf Karten gut steuern. Nachfolgend finden Sie einige Beispiele für Anpassungen, die Sie vornehmen können.

Pfeile

Mit der Eigenschaft IconSequence.offset können Sie Pfeile am Anfang oder Ende der Polylinie einfügen.

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

Beispiel ansehen

Gestrichelte Linien

Sie können einen gestrichelten Linieneffekt erzielen, indem Sie die Deckkraft Ihrer Polylinie auf „0“ setzen und in regelmäßigen Abständen ein undurchsichtiges Symbol über die Linie legen.

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

Beispiel ansehen

Benutzerdefinierte Pfade

Mithilfe von benutzerdefinierten Symbolen lassen sich viele verschiedene Formen zu einer Polylinie hinzufügen.

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

Beispiel ansehen

Symbole animieren

Symbole können entlang eines Pfads animiert werden. Dazu verwenden Sie die Funktion window.setInterval() des DOM, um den Abstand des Symbols in festen Intervallen zu ändern.

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
Beispiel ansehen

Testbeispiel