שכבת שרטוט (ספרייה)

  1. סקירה כללית
  2. שימוש בספרייה
  3. אפשרויות של Drawings Manager
  4. עדכון הפקד של כלי השרטוט
  5. אירועי שרטוט

סקירה כללית

המחלקה DrawingManager מספקת למשתמשים ממשק גרפי שבאמצעותו הם יכולים לצייר פוליגונים, מלבנים, קווים מרובים, מעגלים וסמנים על המפה.

שימוש בספרייה

כלי השרטוט הם ספרייה שעומדת בפני עצמם, ונפרדת מקוד ה-JavaScript הראשי של ה-API של מפות Google. כדי להשתמש בפונקציונליות שנכללת בספרייה הזו, קודם כל צריך לטעון אותה באמצעות הפרמטר libraries בכתובת ה-URL לאתחול של ה-API של מפות Google:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>

אחרי שמוסיפים את הפרמטר של הספריות, אפשר ליצור אובייקט DrawingManager באופן הבא:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

אפשרויות DrawingManager

ה-constructor של DrawingManager משתמש בקבוצת אפשרויות שמגדירות את קבוצת הפקדים להצגה, את מיקום הפקד ואת מצב השרטוט הראשוני.

  • המאפיין drawingMode של DrawingManager מגדיר את מצב השרטוט הראשוני של DrawingsingManager. הוא מקבל קבוע google.maps.drawing.OverlayType. ברירת המחדל היא null, ובמקרה כזה הסמן נמצא במצב ללא שרטוט כאשר DrawingsingManager מופעל.
  • המאפיין drawingControl של DrawingManager מגדיר את החשיפה של ממשק הבחירה של כלי השרטוט במפה. הוא מקבל ערך בוליאני.
  • אפשר גם להגדיר את מיקום הבקרה ואת סוגי שכבות-העל שצריכים להיות מיוצגים בבקרה, באמצעות המאפיין drawingControlOptions של DrawingManager.
    • position מגדיר את המיקום של פקד השרטוט במפה, ומקבל קבוע google.maps.ControlPosition.
    • drawingModes הוא מערך של קבועים של google.maps.drawing.OverlayType ומגדיר את סוגי שכבות-העל שיש לכלול בבוחר הצורות של פקד השרטוט. הסמל של היד תמיד יופיע, ויאפשר למשתמש ליצור אינטראקציה עם המפה ללא שרטוט. סדר הכלים בבקרה יהיה תואם לסדר שבו הם מוצהרים במערך.
  • לכל סוג של שכבת-על אפשר להקצות קבוצה של מאפייני ברירת מחדל שקובעים את המראה של שכבת-העל כשיוצרים אותה. הן מוגדרות במאפיין {overlay}Options של שכבת-העל הזו (כאשר {overlay} מייצג את הסוג של שכבת-העל). לדוגמה, אפשר להגדיר בעזרת המאפיין circleOptions את מאפייני המילוי של מעגל, את מאפייני הקווים, zIndex והקליקביליות. אם מועברים ערכים של גודל, מיקום או מפה, המערכת תתעלם מהם. פרטים מלאים על המאפיינים שאפשר להגדיר מופיעים במשאבי העזרה בנושא הפניות API.

הערה: כדי שהצורה ניתן לעריכה על ידי המשתמש נוצרה אחרי שיוצרים אותה, הגדירו את המאפיין editable של הצורה כ-true.

TypeScript

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    }
  );

  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

window.initMap = initMap;
index.js
להצגת דוגמה

רוצה לנסות דוגמה?

עדכון הפקד של כלי השרטוט מתבצע

אחרי יצירת האובייקט DrawingManager אפשר לעדכן אותו על ידי קריאה ל-setOptions() והעברת ערכים חדשים.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

כדי להסתיר או להציג את הפקד של כלי השרטוט:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

כדי להסיר את הפקד של כלי השרטוט מהאובייקט map:

drawingManager.setMap(null);

הסתרת פקד השרטוט גורמת לכך שהפקד של כלי השרטוט לא מוצג, אבל כל הפונקציונליות של המחלקה DrawingManager עדיין זמינה. כך תוכלו להשתמש באמצעי בקרה משלכם, אם תרצו. הסרת ה-DrawingManager מהאובייקט map משביתה את כל פונקציות השרטוט. צריך לצרף אותו מחדש למפה עם drawingManager.setMap(map), או לבנות אובייקט DrawingManager חדש אם רוצים לשחזר את תכונות השרטוט.

אירועי שרטוט

כאשר נוצרת שכבת-על של צורה, מופעלים שני אירועים:

  • אירוע {overlay}complete (שבו {overlay} מייצג את הסוג של שכבת-העל, כמו circlecomplete, polygoncomplete וכו'). הפניה לשכבת-העל מועברת כארגומנט.
  • אירוע overlaycomplete. ליטרל של אובייקט, שמכיל את OverlayType והפניה לשכבת-העל, מועבר כארגומנט.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

חשוב לדעת שאירועי google.maps.Map כמו click ו-mousemove מושבתים בזמן השרטוט במפה.