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

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

סקירה כללית

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

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

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

הערה: חשוב לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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

הערה: קוד ה-JavaScript מורכב מקטע הקוד של TypeScript.

להצגת דוגמה

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

JSFiddle.net Google Cloud Shell

עדכון הפקד של כלי השרטוט

אחרי שיוצרים את האובייקט 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 מושבתים בזמן שרטוט במפה.