Symbole (ikony wektorowe)

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
  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óra może być wyświetlana w obiekcie Marker lub Polyline. Symbol kształtu jest zdefiniowany w ścieżce za pomocą notacji ścieżki SVG. path to jedyna wymagana właściwość, ale obiekt Symbol obsługuje szereg właściwości wizualnych, takich jak kolor i waga kreski oraz wypełnienia. Zobacz listę właściwości.

Kilka wstępnie zdefiniowanych symboli jest dostępnych w klasie SymbolPath. Listę znajdziesz poniżej.

Właściwości symbolu

Domyślne działanie elementu Symbol różni się nieznacznie w zależności od tego, czy pojawia się ono na znaczniku czy 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 definiują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ą mieścić się w kwadracie 22 x 22 piksele. Jeśli ścieżka zawiera punkty poza tym kwadratem, musisz dostosować właściwość symbolu scale do wartości ułamkowej, np.0,2, aby otrzymane skalowane punkty pasowały do kwadratu.
  • anchor ustawia pozycję 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 na stronie (0, 0). Pozycja jest wyrażona w tym samym systemie współrzędnych co ścieżka symbolu.
  • fillColor to kolor wypełnienia (czyli regionu otoczonego kreską). Obsługiwane są wszystkie kolory CSS3 (oprócz rozszerzonych nazw kolorów). a w przypadku symboli – domyślnie 'black'. W przypadku symboli łamanych liniami domyślnymi 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 (w pełni przejrzyste) do 1,0 (w pełni nieprzezroczyste). Wartość domyślna to 0,0.
  • rotation to kąt, o jaki ma być obracany symbol, wyrażony w stopniach zgodnie z ruchem wskazówek zegara. Domyślnie znacznik symbolu ma obrót 0, a symbol na linii łamanej jest obrócony przez kąt krawędzi tej krawędzi. Obrót symbolu na linii łamanej spowoduje obrót symbolu tak, że nie będzie on wzdłuż krzywej.
  • scale określa kwotę, o jaką symbol jest skalowany. W przypadku znaczników symboli skala domyślna to 1. Po skalowaniu symbol może mieć dowolny rozmiar. W przypadku symboli na linii łamanej skala domyślna to kreska linii łamanej. Po skalowaniu symbol musi znajdować się w kwadracie o wymiarach 22 × 22 pikseli, wyśrodkowany na kotwicy symbolu.
  • strokeColor to kolor konturu symbolu. Obsługiwane są wszystkie kolory CSS3 (oprócz rozszerzonych nazw kolorów). W przypadku symboli domyślna wartość to 'black'. W przypadku symboli na linii łamanej kolorem domyślnym jest linia kreski.
  • strokeOpacity określa względną przezroczystość (czyli brak przezroczystości) kreski wyrażonej symbolem. Wartości pochodzą z zakresu od 0,0 (w pełni przejrzyste) do 1,0 (w pełni nieprzezroczyste). W przypadku znaczników symboli domyślna wartość to 1, 0. W przypadku symboli na linii łamanej domyślną wartością jest jej przezroczystość.
  • strokeWeight określa wagę symbolu. Wartością domyślną jest scale symbolu.

Wstępnie zdefiniowane symbole

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

Symbole domyślne to okrąg i dwa 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 łamanej jest stała. Uznaje się, że kierunek przodu jest położony na końcu linii łamanej.

Możesz zmienić kreski lub wypełnienie wstępnie zdefiniowanych symboli przy użyciu domyślnych opcji symboli.

Uwzględnione są te wstępnie zdefiniowane symbole:

Nazwa Opis Przykład
google.maps.SymbolPath.CIRCLE Koło.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Strzałka w lewo jest zamknięta ze wszystkich stron.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Strzałka w kierunku skierowana do przodu, która jest zamknięta po każdej stronie.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Strzałka w lewo jest otwarta po jednej stronie.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Strzałka w lewo jest otwarta po jednej stronie.

Dodawanie symbolu do znacznika

Aby wyświetlać znacznik wektorowy na podstawie ikony, przekaż obiekt literału Symbol z odpowiednią ścieżką do właściwości icon. 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: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.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(15, 30),
  };

  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: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.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(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
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 1 literalizm obiektu IconSequence z tymi właściwościami:

  • icon (wymagany) to symbol do wyrenderowania w wierszu.
  • offset określa odległość, od której zaczyna się ikona do wyrenderowania. Ta odległość może być wyrażona jako wartość procentowa długości linii (np. '50%') lub w pikselach (na przykład '50px'). Wartości domyślne to '100%'.
  • repeat określa odległość między kolejnymi ikonami na linii. Ta odległość może być wyrażona jako procent długości linii (np. '50%') lub w pikselach (np. '50px'). Aby wyłączyć powtarzanie ikony, wpisz '0'. Wartości domyślne to '0'.

Dzięki połączeniu symboli i klasy PolylineOptions masz dużą kontrolę nad wyglądem i stylem linii łamanych na mapie. Poniżej znajdziesz kilka przykładów dostosowania, 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

Aby uzyskać efekt linii przerywanej, ustaw przezroczystość linii łamanej na 0 i nakładaj na nią 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 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

Animacja

Możesz animować symbol na ścieżce, korzystając z funkcji window.setInterval() modelu DOM i zmień przesunięcie w określonych 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

Fragment