نظرة عامة
توفر فئة DrawingManager
واجهة رسومية للمستخدمين لرسم
المضلعات والمستطيلات والخطوط المتعددة والدوائر والعلامات على الخريطة.
استخدام المكتبة
"أدوات الرسم" عبارة عن مكتبة قائمة بذاتها، منفصلة عن رمز جافا سكريبت لواجهة برمجة تطبيقات الخرائط الرئيسية. لاستخدام الوظائف المضمّنة في هذه المكتبة،
يجب أولاً تحميلها باستخدام المعلمة 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
مجموعة من الخيارات التي تحدد مجموعة عناصر التحكم المراد عرضها وموضع عنصر التحكم وحالة الرسم الأولي.
- تحدد الخاصية
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
. في حالة تمرير أي قيم لحجم أو موقع أو خريطة، يتم تجاهلها. للحصول على التفاصيل الكاملة عن المواقع التي يمكن إعدادها، يُرجى الرجوع إلى مستندات مرجعية واجهة برمجة التطبيقات.
ملاحظة: لجعل الشكل قابل للتعديل بواسطة المستخدم بعد إنشائه، اضبط الخاصية 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
تكون معطلة أثناء الرسم على الخريطة.