ภาพรวม
คลาส DrawingManager
มีอินเทอร์เฟซแบบกราฟิกให้ผู้ใช้วาดรูปหลายเหลี่ยม สี่เหลี่ยมผืนผ้า เส้นประกอบ วงกลม และเครื่องหมายบนแผนที่
การใช้ไลบรารี
เครื่องมือวาดภาพเป็นไลบรารีที่มีในตัว และแยกจากโค้ด JavaScript หลักของ Maps API หากต้องการใช้ฟังก์ชันภายในไลบรารีนี้ คุณต้องโหลดฟังก์ชันโดยใช้พารามิเตอร์ libraries
ใน URL Boottrap ของ 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}
แสดงถึงประเภทโฆษณาซ้อนทับ) เช่น คุณกำหนดคุณสมบัติการเติมสีของแวดวง คุณสมบัติเส้นโครงร่าง zดัชนี และความสามารถในการคลิกได้ด้วยพร็อพเพอร์ตี้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;
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;
ลองใช้ตัวอย่าง
กำลังอัปเดตตัวควบคุมเครื่องมือวาดภาพ
เมื่อสร้างออบเจ็กต์ 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
ใหม่ หากจะเรียกคืนลักษณะการวาด
กิจกรรมการวาด
เมื่อสร้างการวางซ้อนรูปร่าง เหตุการณ์ 2 รายการจะเริ่มทำงาน:
- เหตุการณ์
{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
จะถูกปิดใช้ขณะวาดบนแผนที่