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

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

نظرة عامة

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

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

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

<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 مستوى رؤية واجهة اختيار أدوات الرسم على الخريطة يقبل قيمة منطقية.
  • يمكنك أيضًا تحديد موضع عنصر التحكم وأنواع التراكبات التي يجب تمثيلها في عنصر التحكم، باستخدام السمة 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 أثناء الرسم على الخريطة.