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

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

نظرة عامة

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

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

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

تستخدم الدالة الإنشائية 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، أثناء الرسم على الخريطة.