סקירה כללית
המחלקה 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;
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;
רוצה לנסות דוגמה?
עדכון הפקד של כלי השרטוט מתבצע
אחרי יצירת האובייקט 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
מושבתים בזמן השרטוט במפה.