طبقة الرسم (المكتبة)

  1. نظرة عامة
  2. استخدام "المكتبة"
  3. خيارات DrawingManager
  4. تعديل عنصر التحكّم في أدوات الرسم
  5. فعاليات الرسم

نظرة عامة

يوفر صف DrawingManager واجهة رسومية للمستخدمين لرسم المضلعات والمستطيلات والخطوط المتعددة والدوائر والعلامات على الخريطة.

استخدام "المكتبة"

أدوات الرسم هي مكتبة مستقلة ومنفصلة عن رمز JavaScript الرئيسي لواجهة برمجة التطبيقات Maps API. لاستخدام الوظائف المضمّنة في هذه المكتبة، عليك أولاً تحميلها باستخدام المَعلمة libraries في عنوان URL الخاص ببرنامج Maps API التمهيدي:

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

بعد إضافة مَعلمة libraries، يمكنك إنشاء 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. في حال تم تمرير أي قيم للحجم أو الموقع الجغرافي أو الخريطة، سيتم تجاهلها. للحصول على التفاصيل الكاملة حول الخصائص التي يمكن ضبطها، يُرجى الرجوع إلى مستندات مرجع واجهة برمجة التطبيقات.

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