Symbole (ikony wektorowe)

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

Wprowadzenie

Symbol to ikona wektorowa, która może być wyświetlana w obiekcie Marker lub Polyline. Kształt symbolu jest określany przez ścieżkę w notacji ścieżki SVG. Chociaż jedyną wymaganą właściwością jest path, obiekt Symbol obsługuje wiele właściwości, które pozwalają dostosować aspekty wizualne, takie jak kolor i waga kreski oraz wypełnienia. Zobacz listę usług.

Klasa SymbolPath może zawierać kilka wstępnie zdefiniowanych symboli. Zobacz listę poniżej.

Właściwości symbolu

Pamiętaj, że domyślne działanie elementu Symbol różni się nieznacznie w zależności od tego, czy pojawia się na znaczniku, czy w linii łamanej. Te różnice zostały opisane na liście 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 google.maps.SymbolPath lub zdefiniować ścieżkę niestandardową za pomocą notacji ścieżki SVG. Uwaga: ścieżki wektorowe na linii łamanej muszą pasować do kwadratu 22 x 22 pikseli. Jeśli ścieżka obejmuje punkty poza tym kwadratem, musisz dostosować właściwość scale symbolu do wartości ułamkowej, np.0,2, aby skalowane punkty pasowały do kwadratu.
  • 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ę przez współrzędne x i y kotwicy. Domyślnie symbol jest zakotwiczony w miejscu (0, 0). Pozycja jest wyrażona w tym samym systemie współrzędnych, co ścieżka symbolu.
  • fillColor to kolor wypełnienia symbolu (czyli regionu obramowania). Obsługiwane są wszystkie kolory CSS3 oprócz rozszerzonych nazw kolorów. W przypadku symboli jest to domyślnie czarny. W przypadku symboli łamanych linii domyślnych jest kolor kreski odpowiedniej linii łamanej.
  • fillOpacity określa względną przezroczystość (czyli brak przezroczystości) wypełnienia symbolu. Wartości mogą wynosić od 0,0 (całkowicie przezroczysta) do 1,0 (w pełni nieprzejrzysty). Wartość domyślna to 0,0.
  • rotation to kąt, pod którym ma być obracany symbol, wyrażony w stopniach zgodnie z ruchem wskazówek zegara. Domyślnie znacznik symbolu jest obrócony o 0, a symbol na linii łamanej jest obrócony o kąt, na którym się on znajduje. Ustawienie rotacji symbolu na linii łamanej koryguje obrót symbolu tak, aby nie znajdował się on już po krzywej.
  • scale określa kwotę, o jaką symbol jest skalowany. W przypadku znaczników symboli domyślna jest wartość 1. Po przeskalowaniu symbol może mieć dowolny rozmiar. W przypadku symboli na linii łamanej skala domyślna to waga linii łamanej. Po skalowaniu symbol musi znajdować się wewnątrz kwadratu 22 x 22 pikseli, wyśrodkowany na zakotwiczeniu symbolu.
  • strokeColor to kolor konturu symbolu. Obsługiwane są wszystkie kolory CSS3 oprócz rozszerzonych nazw kolorów. W przypadku symboli jest to domyślnie czarny. W przypadku symboli na linii łamanej kolorem domyślnym jest kolor linii.
  • strokeOpacity określa względną przezroczystość (czyli brak przezroczystości) kreski kreski. Wartości mogą wynosić od 0,0 (całkowicie przezroczysta) do 1,0 (w pełni nieprzejrzysty). W przypadku znaczników symboli domyślna wartość to 1, 0. W przypadku symboli linii łamanych liniami domyślnymi jest przezroczystość 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 kilka wbudowanych symboli, które możesz dodawać do znaczników lub linii łamanych za pomocą klasy SymbolPath.

Symbole domyślne obejmują kółko i 2 rodzaje strzałek. Dostępne są strzałki skierowane do przodu i do tyłu. Jest to szczególnie przydatne w przypadku linii łamanych, ponieważ orientacja symbolu na tej linii jest stała. Uznaje się, że prawdopodobieństwo jest zgodne z końcem linii łamanej.

Możesz zmienić kreskę lub wypełnienie wstępnie zdefiniowanych symboli za pomocą dowolnej z opcji domyślnych.

Obsługiwane są te symbole:

Nazwa Opis Przykład
google.maps.SymbolPath.CIRCLE Kółko.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Strzałka w kierunku skierowana do tyłu po każdej stronie.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Strzałka w przód skierowana do wszystkich stron.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Strzałka z tyłu, która jest otwarta po jednej stronie.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Strzałka z przodu skierowana do jednej strony.

Dodawanie symbolu do znacznika

Aby na znaczniku wyświetlać ikonę wektorową, prześlij dosłowny obiekt Symbol z odpowiednią ścieżką do właściwości icon znacznika. Poniższy przykład pokazuje wykorzystanie 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;
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
Zobacz przykład

Fragment

Dodawanie symbolu na linii łamanej

Aby wyświetlać symbole na linii łamanej, ustaw właściwość icons[] obiektu PolylineOptions. Tablica icons[] przyjmuje co najmniej jeden literał obiektu IconSequence o tych właściwościach:

  • icon (wymagany) to symbol do renderowania w linii.
  • offset określa odległość od początku wiersza, z którego ma być renderowana ikona. Odległość może być wyrażona jako wartość procentowa długości linii (np. „50%”) lub pikseli (np. „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 wartość procentowa długości linii (np. „50%”) lub pikseli (np. „50px”). Aby wyłączyć powtarzanie ikony, wpisz „0”. Wartość domyślna to „0”.

Dzięki połączeniu symboli i klasy PolylineOptions masz dużą kontrolę nad wyglądem i działaniem linii łamanych na mapie. Poniżej znajdziesz kilka przykładów ustawień, które możesz zastosować.

Strzałki

Użyj właściwości IconSequence.offset, aby dodać strzałki na początku lub 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

Linia przerywana

Aby uzyskać efekt linii przerywanej, ustaw nieprzezroczystość linii łamanej na 0, a w regularnych odstępach czasu umieść na niej symbol nieprzezroczystości.

// 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 pozwalają dodawać do linii łamanej wiele 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 wzdłuż ścieżki, korzystając z funkcji window.setInterval() interfejsu DOM, aby 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;
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
Zobacz przykład

Fragment