- Wprowadzenie
- Właściwości symbolu
- Wstępnie zdefiniowane symbole
- Dodawanie symbolu do znacznika
- Dodawanie symbolu do linii łamanej
- 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 elemenciegoogle.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ą jestscale
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;
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 });
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 });
Ś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 });
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;