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

Wprowadzenie

Za Symbol to ikona wektorowa, która może się wyświetlać na Marker lub Polyline obiektu. Kształt symbolu jest definiowany przez ścieżkę za pomocą funkcji Zapis ścieżki SVG. Mimo że path jest jedyną wymaganą właściwością, parametr Obiekt Symbol obsługuje różne właściwości, dzięki czemu możesz: dostosować aspekty wizualne, takie jak kolor i grubość kreski, wypełnienie. Zobacz listę właściwości.

Kilka wstępnie zdefiniowanych symboli dostępnych jest w SymbolPath zajęcia. Ich listę znajdziesz poniżej.

Właściwości symbolu

Pamiętaj, że domyślne działanie funkcji Symbol jest nieco inne w zależności od tego, czy znajduje się na znaczniku czy linii łamanej. Te różnice znajdziesz na liście właściwości poniżej.

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

  • path (wymagany) to ścieżka definiująca jego kształtu. Możesz użyć jednej ze wstępnie zdefiniowanych ścieżek w google.maps.SymbolPath lub zdefiniuj ścieżkę niestandardową za pomocą Zapis ścieżki SVG. Uwaga: ścieżki wektorów na linii łamanej muszą mieścić się w kwadracie o wymiarach 22 x 22 piksele. Jeśli ścieżka obejmuje punkty poza tym kwadratem, musisz dopasować właściwości scale symbolu na wartość ułamkową, np.0,2, tak, aby wynikowe skalowane punkty pasowały do kwadratu.
  • anchor ustawia położenie symbolu względem znacznika lub linii łamanej. Współrzędne ścieżki symbolu są przesuwane w lewo i w górę odpowiednio współrzędnych x i y kotwicy. Domyślnie symbolem jest zakotwiczony na (0, 0). Pozycja jest wyrażona w taki sam sposób układ współrzędnych jako ścieżkę symbolu.
  • fillColor to kolor wypełnienia symbolu (który jest obszar otoczony kreską). Obsługiwane są wszystkie kolory CSS3 oprócz rozszerzonych kolorów nazwanych. Domyślnym ustawieniem dla symboli na znacznikach jest „black”. Symbole na: linii łamanych, domyślnie jest to kolor linii odpowiedniej linii łamanej.
  • fillOpacity określa względną przezroczystość (czyli brak przezroczystość) wypełnienia symbolu. Wartości pochodzą z zakresu od 0,0 (w pełni przezroczysty) do 1,0 (całkowicie nieprzezroczysty). Wartość domyślna to 0,0.
  • rotation to kąt, o który ma być obracany symbol, wyrażony w prawo w stopniach. Domyślnie obrót znacznika symbolu wynosi 0, a symbol na linii łamanej jest obrócony o kąt, na którym kłamstw. Ustawienie obrotu symbolu na linii łamanej poprawi obrót symbol, tak aby nie zajmowały się już krzywą linii.
  • scale określa skalę, o jaką symbol ma być skalowany. W przypadku znaczników symboli domyślna skala to 1. Po skalowaniu symbol może mieć wartość o dowolnym rozmiarze. W przypadku symboli na linii łamanej domyślną skalą jest grubość kreski na linii łamanej. Po skalowaniu symbol musi znajdować się w kwadracie o wymiarach 22 x 22 piksele. wyśrodkowany w punkcie zakotwiczenia symbolu.
  • strokeColor to kolor konturu symbolu. Cała usługa CSS3 kolory są obsługiwane z wyjątkiem rozszerzonych kolorów nazwanych. Symbole na znacznikach: domyślna wartość to „black”. Domyślnym kolorem symboli na linii łamanej jest kolor kreski linii łamanej.
  • strokeOpacity określa względną przezroczystość (czyli brak przezroczystości) kreski symboli. Wartości pochodzą z zakresu od 0,0 (w pełni przezroczysty) do 1,0 (całkowicie nieprzezroczysty). Domyślna wartość dla znaczników symboli to 1.0. W przypadku symboli na liniach łamanych domyślną jest przezroczystość kreski linia łamana.
  • strokeWeight określa wagę obrysu symbolu. domyślna jest wartość scale symbolu.

Wstępnie zdefiniowane symbole

Interfejs Maps JavaScript API udostępnia kilka wbudowanych symboli, dodaj do znaczników lub linii łamanych za pomocą SymbolPath zajęcia.

Domyślne symbole to koło i 2 rodzaje strzałek. Oba do przodu lub strzałki skierowane do tyłu. Jest to szczególnie przydatne w przypadku: linii łamanych, ponieważ orientacja symbolu na linii łamanej jest stała. Przód jest uznawany za kierunek, w którym kończy się koniec linia łamana.

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

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

Nazwa Opis Przykład
google.maps.SymbolPath.CIRCLE Koło.
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 Otwarta po jednej stronie strzałka skierowana do tyłu.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Otwarta z jednej strony strzałka skierowana do przodu.

Dodawanie symbolu do znacznika

Aby wyświetlić ikonę wektorową na marker, przekaż Literał obiektu Symbol z pożądaną ścieżką do kodu znacznika właściwość icon. W poniższym przykładzie użyto Zapis ścieżki SVG aby utworzyć niestandardową ikonę 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

Zobacz próbkę

Dodawanie symbolu do linii łamanej

Aby wyświetlać symbole na linii łamanej, ustaw właściwość icons[] dla obiekt PolylineOptions. Tablica icons[] pobiera jeden lub więcej IconSequence literały obiektów z następującymi wartościami właściwości:

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

Za pomocą kombinacji symboli i klasy PolylineOptions, masz 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 dodawać strzałki do elementów 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żna uzyskać, ustawiając przezroczystość linia łamana do 0 i nałożenie nieprzezroczystego symbolu na linię w regularnych odstępach interwały.

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

Do linii łamanej można dodawać 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

Animuj symbol

Można animować symbol na ścieżce za pomocą modelu DOM window.setInterval() do zmiany przesunięcia 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

Zobacz próbkę