הודעה: בקרוב תהיה אפשרות להשתמש בסגנון חדש למפות הבסיס בפלטפורמה של מפות Google. העדכון הזה לסגנון המפה כולל ערכת צבעים חדשה שמוגדרת כברירת מחדל, סיכות מודרניות ושיפורים בחוויית השימוש במפה ובממשק שלה. כל סגנונות המפה יתעדכנו באופן אוטומטי במרץ 2025. מידע נוסף על הזמינות ועל האופן שבו אפשר להביע הסכמה מוקדם יותר זמין במאמר סגנון מפה חדש בפלטפורמה של מפות Google.

דף זה תורגם על ידי Cloud Translation API.

סמלים (סמלים מבוססי-וקטור)

מבוא
המאפיינים של סמל
סמלים מוגדרים מראש
הוספת סמל לסמן
הוספת סמל לקו מרובע
אנימציה של סמל

מבוא

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. אחרי שינוי התצוגה, הסמל יכול להיות בכל גודל. בסמלים על קו פוליגון, קנה המידה שמוגדר כברירת מחדל הוא עובי הקו של הקו הפוליגוני. אחרי שינוי התצוגה, הסמל צריך להימצא בתוך ריבוע בגודל 22x22px, שמוצב במרכז הציר של הסמל.
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`	חץ שמצביע קדימה ופתוח בצד אחד.

הוספת סמל לסמן

כדי להציג סמל מבוסס-וקטור בסמן, מעבירים לנכס icon של הסמן ליטרל אובייקט מסוג Symbol עם הנתיב הרצוי. בדוגמה הבאה נעשה שימוש בסימון נתיב 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;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

להצגת דוגמה

ניסיון של דוגמה

JSFiddle.net Google Cloud Shell

הוספת סמל לקו מרובה

כדי להציג סמלים על קו פוליגון, מגדירים את המאפיין icons[] של האובייקט PolylineOptions. מערך icons[] מקבל ליטרלים של אובייקטים מסוג IconSequence, עם המאפיינים הבאים:

icon (חובה) הוא הסמל שרוצים להציג בשורה.
offset קובע את המרחק מתחילת הקו שבו צריך להציג את הסמל. אפשר לציין את המרחק הזה כאחוז מאורך הקו (לדוגמה, '50%') או בפיקסלים (לדוגמה, '50px'). ערך ברירת המחדל הוא '100%'.
repeat קובע את המרחק בין סמלים רצופים בקו. אפשר לציין את המרחק הזה כאחוז מאורך הקו (לדוגמה, '50%') או בפיקסלים (לדוגמה, '50px'). כדי להשבית את החזרה של הסמל, מציינים '0'. ערך ברירת המחדל הוא '0'.

הערה: אם קו הפוליגון הוא גיאודטי (כלומר, אם המאפיין geodesic שלו מוגדר כ-true), המרחקים שצוינו גם עבור offset וגם עבור repeat מחושבים במטרים כברירת מחדל. הגדרת offset או repeat לערך פיקסלים תגרום לחישוב המרחקים בפיקסלים במסך.

שילוב של סמלים עם הכיתה 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;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

להצגת דוגמה

ניסיון של דוגמה

JSFiddle.net Google Cloud Shell