لایه طراحی (کتابخانه)

  1. نمای کلی
  2. با استفاده از کتابخانه
  3. گزینه های DrawingManager
  4. به روز رسانی کنترل ابزار طراحی
  5. رویدادهای نقاشی

نمای کلی

کلاس DrawingManager یک رابط گرافیکی برای کاربران فراهم می کند تا چند ضلعی، مستطیل، چند خط، دایره و نشانگر را روی نقشه ترسیم کنند.

با استفاده از کتابخانه

ابزار طراحی یک کتابخانه مستقل و جدا از کد اصلی جاوا اسکریپت Maps API است. برای استفاده از عملکرد موجود در این کتابخانه، ابتدا باید آن را با استفاده از پارامتر 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 قابلیت مشاهده رابط انتخاب ابزارهای ترسیمی را بر روی نقشه مشخص می کند. یک مقدار بولی را می پذیرد.
  • همچنین می‌توانید با استفاده از ویژگی drawingControlOptions در DrawingManager ، موقعیت کنترل و انواع پوشش‌هایی را که باید در کنترل نشان داده شوند، تعریف کنید.
    • position موقعیت کنترل ترسیمی را روی نقشه مشخص می کند و یک ثابت google.maps.ControlPosition را می پذیرد.
    • drawingModes آرایه‌ای از ثابت‌های google.maps.drawing.OverlayType است و انواع همپوشانی را برای گنجاندن در انتخابگر شکل کنترل طراحی تعریف می‌کند. نماد دست همیشه وجود خواهد داشت و به کاربر این امکان را می دهد تا بدون ترسیم با نقشه تعامل داشته باشد. ترتیب ابزارهای موجود در کنترل با ترتیبی که در آرایه اعلام شده اند مطابقت دارد.
  • به هر نوع همپوشانی می‌توان مجموعه‌ای از ویژگی‌های پیش‌فرض را اختصاص داد، که ظاهر پوشش را در اولین ایجاد مشخص می‌کند. اینها در ویژگی {overlay}Options آن همپوشانی (که در آن {overlay} نوع پوشش را نشان می دهد) تعریف شده است. به عنوان مثال، ویژگی های پر کردن دایره، ویژگی های stroke، zIndex و قابلیت کلیک کردن را می توان با ویژگی circleOptions تعریف کرد. اگر هر اندازه، مکان یا مقدار نقشه ارسال شود، نادیده گرفته می شود. برای جزئیات کامل اینکه کدام ویژگی ها را می توان تنظیم کرد، به مستندات مرجع API مراجعه کنید.

توجه: برای اینکه یک شکل پس از ایجاد آن توسط کاربر قابل ویرایش باشد، ویژگی 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;

جاوا اسکریپت

// 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;
مشاهده نمونه

Sample را امتحان کنید

به روز رسانی کنترل ابزار طراحی

هنگامی که شیء 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 هنگام طراحی روی نقشه غیرفعال هستند.