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

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

نظرة عامة

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

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

"أدوات الرسم" هي مكتبة مستقلة تتضمن رمز JavaScript API API للخرائط. لاستخدام الوظيفة المضمّنة في هذه المكتبة، عليك تحميلها أولاً باستخدام المعلمة libraries في عنوان URL لتشغيل خرائط Google 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);

خيارات Drawing Manager

تأخذ أداة إنشاء 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} نوع التركيب). على سبيل المثال، يمكن تحديد خصائص ملء الدائرة وخصائص السكتات والمؤشر وقابلية النقر باستخدام خاصية 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، غير مفعّلة أثناء الرسم على الخريطة.