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