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