מבוא
Symbol
הוא סמל מבוסס-וקטורים שניתן להציג
Marker
או
Polyline
לאובייקט. צורת הסמל מוגדרת על ידי נתיב באמצעות
סימון נתיב SVG.
path
הוא המאפיין הנדרש היחיד, אבל
האובייקט Symbol
תומך במגוון מאפיינים שמאפשרים
להתאים אישית היבטים חזותיים, כמו הצבע והמשקל של הקו
מילוי. כאן אפשר לעיין ברשימת הנכסים.
יש כמה סמלים מוגדרים מראש שזמינים דרך SymbolPath
בכיתה. פרטים נוספים זמינים ברשימה שבהמשך.
תכונות של סמל
חשוב לשים לב שפעולת ברירת המחדל של Symbol
משתנה מעט
בהתאם למצב שבו היא מופיעה על סמן או על קו פוליגוני. ההבדלים האלה
ברשימת הנכסים שבהמשך.
Symbol
תומך במאפיינים הבאים:
path
(חובה) הוא הנתיב שמגדיר את צורת הסמל. אפשר להשתמש באחד מהנתיבים המוגדרים מראש ב-google.maps.SymbolPath
או להגדיר נתיב מותאם אישית באמצעות סימון נתיב SVG. הערה: נתיבים וקטוריים בקו פוליגוני חייבים להתאים לריבוע בגודל 22x22 פיקסלים. אם הנתיב שלך כולל נקודות מחוץ לריבוע, עליך לשנות את של הסמלscale
לערך עשרוני, כמו 0.2, כך שהנקודות המותאמות אישית שהתקבלו בתוך הריבוע.anchor
קובע את מיקום הסמל ביחס לסמן או קו פוליגוני. הקואורדינטות של נתיב הסמל מתורגמות שמאלה ולמעלה לפי הקואורדינטות x ו-y של העוגן, בהתאמה. כברירת מחדל, סמל הוא מעוגנת ב-(0, 0)
. המיקום מבוטאת באותו אופן מערכת הקואורדינטות כנתיב הסמל.fillColor
הוא צבע המילוי של הסמל (כלומר האזור שתחום על ידי הקו). כל צבעי CSS3 נתמכים, למעט צבעים מורחבים בעלי שם. לסמלים שעל סמנים, ברירת המחדל היא 'שחור'. לסמלים מופעלים קווים פוליגוניים, ברירת המחדל היא צבע הקו של הקו הפוליגוני המתאים.fillOpacity
מגדיר את האטימות היחסית (כלומר, היעדר ) של מילוי הסמל. הערכים נעים בין 0.0 (שלמות) שקוף) ל-1.0 (אטום מלא). ערך ברירת המחדל הוא 0.0.rotation
הוא הזווית שבה צריך לסובב את הסמל, מבוטאת בכיוון השעון במעלות. כברירת מחדל, סמן הסמל כולל סיבוב של 0, וסמל על קו פוליגוני מסובב על ידי הזווית של הקצה שעליו הוא מסובב שקרים. הגדרת סיבוב של סמל על קו פוליגוני תתקן את הסיבוב של את הסמל כך שלא יעקוב יותר אחר עקומת הקו.scale
קובע את גודל קנה המידה של הסמל. לסמני סמלים, סולם ברירת המחדל הוא 1. לאחר שינוי קנה המידה, הסמל יכול להיות בכל גודל. עבור סמלים על קו פוליגוני, סולם ברירת המחדל הוא עובי הקו הקו הפוליגוני. לאחר שינוי קנה המידה, הסמל חייב להימצא בתוך ריבוע בגודל 22x22 פיקסלים, שבמרכזה בעוגן של הסמל.strokeColor
הוא הצבע של קווי המתאר של הסמל. כל CSS3 צבעים נתמכים, למעט צבעים מורחבים בעלי שם. לסמלים שמופיעים בסמנים: ערך ברירת המחדל הוא 'שחור'. עבור סמלים על קו פוליגוני, צבע ברירת המחדל הוא צבע הקו של הפוליגון.strokeOpacity
קובע את האטימות היחסית (כלומר, חוסר של שקיפות) של הקו של הסמל. הערכים נעים בין 0.0 (שלמות) שקוף) ל-1.0 (אטום מלא). בסמני סמלים, ברירת המחדל היא 1.0 עבור סמלים בקווים פוליגוניים, ברירת המחדל היא אטימות הקווים קו פוליגוני.strokeWeight
מגדיר את המשקל של מתאר הסמל. ברירת המחדל היאscale
של הסמל.
סמלים שהוגדרו מראש
ממשק ה-API של JavaScript במפות Google כולל כמה סמלים מובנים שניתן
להוסיף לסמנים או לקווים פוליגוניים באמצעות
SymbolPath
.
סמלי ברירת המחדל כוללים עיגול ושני סוגי חיצים. שניהם קדימה וחיצים הפונים אחורה זמינים. זה שימושי במיוחד כאשר קווים פוליגוניים, מפני שהכיוון של סמל על קו פוליגוני קבוע. העברה נחשבת בכיוון של הקצוות קו פוליגוני.
ניתן לשנות את הקו או מילוי של הסמלים המוגדרים מראש באמצעות כל אחד אפשרויות לסמלי ברירת מחדל.
אלה הסמלים המוגדרים מראש:
שם | תיאור | דוגמה |
---|---|---|
google.maps.SymbolPath.CIRCLE |
מעגל. | ![]() |
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW |
חץ שפונה לאחור וסגור מכל הצדדים. | ![]() |
google.maps.SymbolPath.FORWARD_CLOSED_ARROW |
חץ שפונה קדימה סגור מכל הצדדים. | ![]() |
google.maps.SymbolPath.BACKWARD_OPEN_ARROW |
חץ שפונה לאחור ופתוח בצד אחד. | ![]() |
google.maps.SymbolPath.FORWARD_OPEN_ARROW |
חץ שפונה קדימה ופתוח בצד אחד. | ![]() |
הוספת סמל לסמן
כדי להציג סמל מבוסס וקטורים
סמן, מעבירים
ליטרל של אובייקט Symbol
עם הנתיב הרצוי
נכס icon
. הדוגמה הבאה משתמשת
סימון נתיב 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;
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;
כדאי לנסות דוגמה
הוספת סמל לקו פוליגוני
כדי להציג סמלים על קו פוליגוני, צריך להגדיר את המאפיין icons[]
של
את האובייקט PolylineOptions
. המערך icons[]
לוקח
אחד או יותר
ליטרלים של אובייקטים ב-IconSequence
, עם
נכסים:
icon
(חובה) הוא הסמל שיש לעבד בו השורה.offset
קובע את המרחק מתחילת הקו שבו הסמל יוצג. את המרחק הזה אפשר לבטא אחוז מאורך הקו (לדוגמה '50%') או בפיקסלים (עבור לדוגמה, '50px'). ערך ברירת המחדל הוא 100%.repeat
קובע את המרחק בין סמלים עוקבים מופעלים השורה. ניתן לבטא מרחק זה כאחוז מאורך הקו (לדוגמה, 50%) או בפיקסלים (למשל 50 פיקסלים). כדי להשבית את החזרה של הסמל, מציינים '0'. ערך ברירת המחדל הוא 0.
באמצעות שילוב של סמלים והמחלקה PolylineOptions
,
יש לך שליטה רבה על המראה והתחושה של קווים פוליגוניים במפה.
בהמשך מפורטות כמה דוגמאות להתאמות אישיות שאפשר להחיל.
חצים
צריך להשתמש במאפיין IconSequence.offset
כדי להוסיף חיצים אל
ההתחלה או הסוף של הקו הפוליגוני.
// 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 });
קווים מקווקווים
אפשר ליצור אפקט של קו מקווקו על ידי הגדרת האטימות של קו פוליגוני עד 0, ושכבת-על של סמל אטום מעל הקו במרווחים.
// 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 });
נתיבים מותאמים אישית
בעזרת סמלים מותאמים אישית ניתן להוסיף הרבה צורות שונות לקו פוליגוני.
// 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 });
אנימציה של סמל
אפשר להוסיף אנימציה לסמל לאורך נתיב באמצעות
הפונקציה window.setInterval()
כדי לשנות את ההיסט של הסמל
במרווחי זמן קבועים.
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;