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