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

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

نظرة عامة

توفر فئة 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;
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 تكون معطلة أثناء الرسم على الخريطة.