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

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

نظرة عامة

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

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

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

بعد إضافة مَعلمة المكتبات، يمكنك إنشاء عنصر DrawingManager على النحو التالي:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

خيارات DrawingManager

يأخذ مُنشئ DrawingManager مجموعة من الخيارات التي تحدّد مجموعة عناصر التحكّم التي سيتم عرضها وموقع عنصر التحكّم وحالة الرسم المبدئي.

  • تحدّد سمة drawingMode في DrawingManager حالة الالتقاط الأولية لـ DrawingManager. يمكن إدخال ثابت google.maps.drawing.OverlayType. القيمة التلقائية هي null، وفي هذه الحالة يكون المؤشر في وضع عدم الرسم عند بدء DrawingManager.
  • تحدّد سمة drawingControl في DrawingManager مستوى ظهور واجهة اختيار أدوات الرسم على الخريطة. يمكن إدخال قيمة boolean.
  • يمكنك أيضًا تحديد موضع عنصر التحكّم وأنواع العناصر التي تظهر فوق العنصر والتي يجب تمثيلها في عنصر التحكّم، وذلك باستخدام سمة 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 أثناء الرسم على الخريطة.