Symbole (ikony wektorowe)

  1. Wprowadzenie
  2. Właściwości symbolu
  3. Symbole wstępnie zdefiniowane
  4. Dodawanie symbolu do znacznika
  5. Dodawanie symbolu do polilinii
  6. Animowanie symbolu

Wprowadzenie

Symbol to ikona wektorowa, która może być wyświetlana na obiekcie Marker lub Polyline. Kształt symbolu jest zdefiniowany przez ścieżkę w notacji ścieżki SVG. Chociaż właściwość path jest jedyną wymaganą właściwością, obiekt Symbol obsługuje wiele innych właściwości, które umożliwiają dostosowywanie aspektów wizualnych, takich jak kolor i grubość obrysu oraz wypełnienie. Zobacz listę właściwości.

W klasie SymbolPathdostępnych jest kilka wstępnie zdefiniowanych symboli. Ich listę znajdziesz 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ę on na znaczniku czy na polilinie. Te różnice zostały opisane na liście właściwości poniżej.

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

  • path (wymagany) to ścieżka definiująca kształt symbolu. Możesz użyć jednej z wstępnie zdefiniowanych ścieżek w  google.maps.SymbolPath lub zdefiniować ścieżkę niestandardową za pomocą notacji ścieżki SVG. Uwaga: wektorowe ścieżki 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ści symbolu scale do wartości ułamkowej, np.0,2, aby uzyskane punkty po skalowaniu mieściły się w kwadracie.
  • anchor ustawia pozycję symbolu względem znacznika lub linii łamanej. Współrzędne ścieżki symbolu są przesunięte w górę i w lewo o odpowiednio współrzędne x i y kotwicy. Domyślnie symbol jest zakotwiczony na poziomie (0, 0). Pozycja jest wyrażona w tym samym układzie współrzędnych co ścieżka symbolu.
  • fillColor to kolor wypełnienia symbolu (czyli regionu ograniczonego przez kreskę). Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych kolorów o nazwie. Domyślny kolor symboli na znacznikach to „czarny”. W przypadku symboli na liniach łamanych domyślnie jest używany kolor obrysu odpowiadającej linii łamanej.
  • fillOpacity określa względną przezroczystość (czyli brak przezroczystości) wypełnienia symbolu. Wartości mieszczą się w zakresie od 0,0 (przezroczystość) do 1,0 (nieprzezroczystość). Wartość domyślna to 0,0.
  • rotation to kąt obrotu symbolu wyrażony w stopniach zgodnie z ruchem wskazówek zegara. Domyślnie obrót znacznika symbolu wynosi 0, a symbol na polilinii jest obracany o kąt krawędzi, na której się znajduje. Ustawienie rotacji symbolu na polilinii spowoduje, że symbol nie będzie już podążać za krzywizną linii.
  • scale określa, o ile zmniejszyć rozmiar symbolu. W przypadku znaczników symboli domyślna skala to 1. Po skalowaniu symbol może mieć dowolny rozmiar. W przypadku symboli na polilinii domyślna skala to grubość obrysu polilinii. Po skalowaniu symbol musi mieścić się w kwadracie o wymiarach 22 x 22 piksele, a jego punkt kotwiczenia musi być wyśrodkowany.
  • strokeColor to kolor obrysu symbolu. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych kolorów nazwanych. Domyślny kolor symboli na znacznikach to „czarny”. W przypadku symboli na polilinie domyślnym kolorem jest kolor obrysu polilinii.
  • strokeOpacity określa względną przezroczystość (czyli brak przezroczystości) obrysu symbolu. Wartości mieszczą się w zakresie od 0,0 (przezroczystość) do 1,0 (nieprzezroczystość). W przypadku znaczników symboli domyślna wartość to 1, 0. W przypadku symboli na liniach łamanych domyślnie jest używana krycie obrysu linii.
  • strokeWeight określa grubość obrysu symbolu. Wartość domyślna to scale symbolu.

Symbole wstępnie zdefiniowane

Interfejs Maps JavaScript API udostępnia kilka wbudowanych symboli, które możesz dodawać do znaczników lub polilinii za pomocą klasy SymbolPath.

Domyślne symbole to koło i 2 typy strzałek. Dostępne są strzałki skierowane do przodu i do tyłu. Jest to szczególnie przydatne w przypadku polilinii, ponieważ orientacja symbolu na polilinii jest stała. Kierunek do przodu to kierunek do punktu końcowego linii łamanej.

Możesz zmodyfikować obrys lub wypełnienie wstępnie zdefiniowanych symboli, korzystając z dowolnych domyślnych opcji symboli.

Dostępne są te wstępnie zdefiniowane symbole:

Nazwa Opis Przykład
google.maps.SymbolPath.CIRCLE okrąg,
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Strzałka skierowana wstecz, 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 wstecz, która jest otwarta z jednej strony.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Strzałka skierowana w przód, otwarta z jednej strony.

Dodawanie symbolu do znacznika

Aby wyświetlić ikonę wektorową na markerze, prześlij literał obiektu Symbol z żądaną ścieżką do właściwości icon markera. W tym przykładzie do utworzenia niestandardowej ikony znacznika użyto notacji ścieżki SVG.

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

Wypróbuj próbkę

Dodawanie symbolu do linii łamanej

Aby wyświetlić symbole na polilinii, ustaw właściwość icons[] obiektu PolylineOptions. Tablica icons[] przyjmuje co najmniej 1 wartość dosłowną obiektu IconSequence z tymi właściwościami:

  • icon (wymagany) to symbol do wyrenderowania na linii.
  • offset określa odległość od początku linii, w której ma zostać wyrenderowana ikona. Odległość może być wyrażona jako odsetek długości linii (np. „50%”) lub w pikselach (np. „50 px”). 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 (np. „50%”) lub w pikselach (np. „50 px”). Aby wyłączyć powtarzanie ikony, użyj wartości „0”. Wartość domyślna to „0”.

Dzięki kombinacji symboli i klasy PolylineOptions masz dużą kontrolę nad wyglądem i wygodą korzystania z wielokątów 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 polilinii.

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

Aby uzyskać efekt przerywanej linii, ustaw przezroczystość polilinii na 0, a następnie nakładaj na nią nieprzezroczysty symbol w regularnych odstępach.

// 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 polilinii 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, używając funkcji window.setInterval() w DOM, aby zmieniać przesunięcie symbolu w określonych odstępach czasowych.

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

Wypróbuj próbkę