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

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

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

ממשק ה-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;
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
להצגת דוגמה

כדאי לנסות דוגמה

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

כדי להציג סמלים על קו פוליגוני, צריך להגדיר את המאפיין 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;
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
להצגת דוגמה

כדאי לנסות דוגמה