מבוא
Symbol הוא סמל מבוסס-וקטור שניתן להציג באובייקט
Marker או
ב-Polyline. צורת הסמל מוגדרת על ידי נתיב באמצעות סימון נתיב של SVG.
path הוא המאפיין הנדרש היחיד, אבל
האובייקט Symbol תומך במגוון מאפיינים שמאפשרים להתאים אישית מאפיינים חזותיים, כמו הצבע והמשקל של הקו והמילוי. עיינו ברשימת הנכסים.
יש כמה סמלים מוגדרים מראש שזמינים דרך המחלקה SymbolPath. לעיון ברשימה בהמשך
תכונות של סמל
חשוב לשים לב שהתנהגות ברירת המחדל של Symbol משתנה מעט בהתאם למקום שבו הוא מופיע בסמן או בקו פוליגוני. השונות הזו מתוארת ברשימת המאפיינים שבהמשך.
ב-Symbol יש תמיכה במאפיינים הבאים:
path(חובה) הוא הנתיב שמגדיר את צורת הסמל. תוכלו להשתמש באחד מהנתיבים המוגדרים מראש ב-google.maps.SymbolPathאו להגדיר נתיב בהתאמה אישית באמצעות סימון נתיבים בפורמט SVG. הערה: נתיבים וקטוריים על קו מרובה חייבים להתאים בתוך ריבוע בגודל 22x22 פיקסלים. אם הנתיב כולל נקודות מחוץ לריבוע הזה, צריך להתאים את המאפייןscaleשל הסמל לערך שבר, כמו 0.2, כך שהנקודות שיווצרו יתאימו בתוך הריבוע.anchorקובע את מיקום הסמל ביחס לסמן או לקו ה-polyline. הקואורדינטות של נתיב הסמל מתורגמות שמאלה ולמעלה לפי קואורדינטות ה-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%') או בפיקסלים (לדוגמה, '50 פיקסלים'). ברירת המחדל היא '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() של DOM כדי לשנות את ההיסט של הסמל
במרווחים קבועים.
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;