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 einem AdvancedMarkerElement anzuzeigen, verwenden Sie ein SVG-XML-Element. Im folgenden Beispiel wird gezeigt, wie ein SVG-XML-Element an ein AdvancedMarkerElement angehängt wird.

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

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;

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