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

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

סקירה כללית

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

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

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

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

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

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

אפשרויות של DrawingManager

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

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