Symbole (ikony wektorowe)

  1. Wprowadzenie
  2. Właściwości symbolu
  3. Wstępnie zdefiniowane symbole
  4. Dodawanie symbolu do znacznika
  5. Dodawanie symbolu do linii łamanej
  6. Animowanie symbolu

Wstęp

Symbol to ikona wektorowa, którą można wyświetlić w obiekcie Marker lub Polyline. Kształt symbolu jest zdefiniowany za pomocą ścieżki w notacji ścieżki SVG. path jest jedyną wymaganą właściwością, ale obiekt Symbol obsługuje różne właściwości, które pozwalają dostosować aspekty wizualne, takie jak kolor, grubość linii i wypełnienie. Zobacz listę usług.

Klasa SymbolPath udostępnia kilka wstępnie zdefiniowanych symboli. Listę znajdziesz poniżej.

Właściwości symbolu

Zauważ, że domyślne zachowanie obiektu Symbol różni się nieco w zależności od tego, czy pojawia się na znaczniku czy na linii łamanej. Te różnice opisujemy na liście właściwości poniżej.

Symbol obsługuje te właściwości:

  • path (wymagany) to ścieżka określająca kształt symbolu. Możesz użyć jednej ze wstępnie zdefiniowanych ścieżek w elemencie google.maps.SymbolPath lub zdefiniować ścieżkę niestandardową za pomocą notacji ścieżki SVG. Uwaga: ścieżki wektorowe na linii łamanej muszą mieścić się w kwadracie o wymiarach 22 x 22 piksele. Jeśli ścieżka zawiera punkty poza tym kwadratem, musisz dostosować właściwość scale symbolu do wartości ułamkowej, np.0,2, aby wynikowe skalowane punkty zmieściły się w kwadracie.
  • anchor określa położenie symbolu względem znacznika lub linii łamanej. Współrzędne ścieżki symbolu są przesuwane odpowiednio w lewo i w górę zgodnie ze współrzędnymi x i y kotwicy. Domyślnie symbol jest zakotwiczony w miejscu (0, 0). Położenie jest wyrażane w tym samym układzie współrzędnych co ścieżka symbolu.
  • fillColor to kolor wypełnienia symbolu (czyli obszar otoczony kreską). Obsługiwane są wszystkie kolory CSS3 z wyjątkiem kolorów o rozszerzonych nazwach. W przypadku symboli na znacznikach wartość domyślna to „czarny”. W przypadku symboli na liniach łamanych domyślnym jest kolor kreski odpowiedniej linii łamanej.
  • fillOpacity określa względną przezroczystość (czyli brak przezroczystości) wypełnienia symbolu. Wartości pochodzą z zakresu od 0,0 (całkowita przezroczysta) do 1,0 (całkowicie nieprzezroczyste). Wartością domyślną jest 0,0.
  • rotation to kąt, o który należy obracać symbol, wyrażony w stopniach w prawo. Domyślnie znacznik symbolu ma obrót o wartości 0, a symbol na linii łamanej jest obrócony o kąt krawędzi, na której się on znajduje. Ustawienie obrotu symbolu na linii łamanej spowoduje, że symbol nie będzie się obracał i nie będzie już wzdłuż krzywej linii.
  • scale ustawia wartość, na podstawie której skalowany jest rozmiar. W przypadku znaczników symboli domyślna skala to 1. Po skalowaniu symbol może mieć dowolny rozmiar. W przypadku symboli na linii łamanej domyślną skalą jest grubość linii łamanej. Po skalowaniu symbol musi znajdować się w kwadracie o wymiarach 22 x 22 piksele wyśrodkowanym na kotwicze symbolu.
  • strokeColor to kolor obrysu symbolu. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem kolorów rozszerzonych. W przypadku symboli na znacznikach wartość domyślna to „czarny”. W przypadku symboli na linii łamanej domyślnym kolorem jest kolor linii łamanej.
  • strokeOpacity określa względną przezroczystość (czyli brak przezroczystości) kreski symbolu. Wartości pochodzą z zakresu od 0,0 (całkowita przezroczysta) do 1,0 (całkowicie nieprzezroczyste). W przypadku znaczników symboli domyślna wartość to 1.0. W przypadku symboli na liniach łamanych domyślna jest przezroczystość kreski linii łamanej.
  • strokeWeight określa wagę obrysu symbolu. Wartością domyślną jest scale symbolu.

Wstępnie zdefiniowane symbole

Interfejs Maps JavaScript API udostępnia wbudowane symbole, które można dodawać do znaczników lub linii łamanych za pomocą klasy SymbolPath.

Symbole domyślne to okrąg i 2 rodzaje strzałek. Dostępne są zarówno strzałki do przodu, jak i do tyłu. Jest to szczególnie przydatne w przypadku linii łamanych, ponieważ orientacja symbolu na linii łamanej jest stała. Uznaje się, że ruch do przodu znajduje się w kierunku końca linii łamanej.

Możesz zmienić kreskę lub wypełnienie wstępnie zdefiniowanego symbolu, korzystając z dowolnej z domyślnych opcji symboli.

Uwzględniono te wstępnie zdefiniowane symbole:

Nazwa Opis Przykład
google.maps.SymbolPath.CIRCLE Krąg.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Strzałka skierowana do tyłu, zamknięta ze wszystkich stron.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Strzałka skierowana do przodu, zamknięta ze wszystkich stron.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Strzałka skierowana do tyłu, otwarta po jednej stronie.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Otwarta po jednej stronie strzałka skierowana do przodu.

Dodaj symbol do znacznika

Aby wyświetlić ikonę wektorową na znaczniku, przekaż literał obiektu Symbol z pożądaną ścieżką do właściwości icon znacznika. Ten przykład pokazuje użycie notacji ścieżki SVG do utworzenia niestandardowej ikony znacznika.

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;

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;
Zobacz przykład

Wypróbuj fragment

Dodawanie symbolu do linii łamanej

Aby wyświetlać symbole na linii łamanej, ustaw właściwość icons[] obiektu PolylineOptions. Tablica icons[] przyjmuje co najmniej 1 literę obiektu IconSequence z tymi właściwościami:

  • icon (wymagany) to symbol do renderowania w linii.
  • offset określa odległość od początku linii, w której ma być renderowana ikona. Odległość może być wyrażona jako procent długości linii (np. „50%”) lub w pikselach (na przykład „50px”). Wartość domyślna to „100%”.
  • repeat określa odległość między kolejnymi ikonami na linii. Odległość może być wyrażona jako procent długości linii (na przykład „50%”) lub w pikselach (na przykład „50px”). Aby wyłączyć powtarzanie tej ikony, wpisz wartość „0”. Wartością domyślną jest „0”.

Połączenie symboli i klasy PolylineOptions zapewnia dużą kontrolę nad wyglądem i działaniem linii łamanych na mapie. Poniżej znajdziesz kilka przykładów dostosowań, które możesz zastosować.

Strzałki

Użyj właściwości IconSequence.offset, aby dodać strzałki na początku lub na końcu linii łamanej.

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

Zobacz przykład

Linie przerywane

Efekt linii przerywanej możesz uzyskać, ustawiając przezroczystość linii łamanej na 0 i nakładając na nią nieprzezroczysty symbol w regularnych odstępach czasu.

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

Zobacz przykład

Ścieżki niestandardowe

Symbole niestandardowe umożliwiają dodawanie do linii łamanej wielu różnych kształtów.

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

Zobacz przykład

Animowanie symbolu

Możesz animować symbol na ścieżce za pomocą funkcji window.setInterval() modelu DOM, która pozwala zmieniać przesunięcie symbolu w stałych odstępach czasu.

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;
Zobacz przykład

Wypróbuj fragment