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

  1. מבוא
  2. מאפיינים של סמל
  3. סמלים מוגדרים מראש
  4. הוספת סמל לסמן
  5. הוספת סמל לקו פוליגוני
  6. יצירת אנימציה לסמל

מבוא

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 של הסמל.

סמלים מוגדרים מראש

‫Maps JavaScript API מספק כמה סמלים מובנים שאפשר להוסיף לסמנים או לקווים שבורים באמצעות המחלקה 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 חץ שמצביע קדימה ופתוח בצד אחד.

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

כדי להציג סמל מבוסס-וקטור ב-AdvancedMarkerElement, משתמשים ברכיב XML‏ SVG. בדוגמה הבאה אפשר לראות איך מוסיפים רכיב SVG XML ל-AdvancedMarkerElement.

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

JavaScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

הוספת סמל לקו פוליגוני

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

  • ‫icon (חובה) הוא הסמל שיוצג בשורה.
  • ‫offset קובע את המרחק מתחילת הקו שבו יוצג הסמל. המרחק הזה יכול להיות מבוטא כאחוז מאורך הקו (לדוגמה, 50%) או בפיקסלים (לדוגמה, 50px). ערך ברירת המחדל הוא '100%‎'.
  • ‫repeat קובע את המרחק בין סמלים עוקבים על הקו. המרחק הזה יכול להיות מבוטא כאחוז מאורך הקו (לדוגמה, 50%) או בפיקסלים (לדוגמה, 50px). כדי להשבית את החזרה על הסמל, מציינים '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;
לדוגמה