เลเยอร์การวาด (คลัง)

  1. ภาพรวม
  2. การใช้คลัง
  3. ตัวเลือก DrawingManager
  4. การอัปเดตการควบคุมเครื่องมือวาด
  5. งานกิจกรรมการวาดภาพ

ภาพรวม

คลาส DrawingManager มีอินเทอร์เฟซแบบกราฟิกสำหรับให้ผู้ใช้วาดรูปหลายเหลี่ยม สี่เหลี่ยมผืนผ้า เส้นประกอบ วงกลม และเครื่องหมายบนแผนที่

การใช้คลัง

เครื่องมือวาดรูปเป็นไลบรารีแบบสแตนด์อโลนแยกจากโค้ด JavaScript หลักของ 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} แสดงถึงประเภทโฆษณาซ้อนทับ) เช่น คุณสามารถกําหนดพร็อพเพอร์ตี้การเติม พร็อพเพอร์ตี้การวาดเส้น ระดับ 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;
index.ts

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;
index.js
ดูตัวอย่าง

ลองใช้ตัวอย่าง

การอัปเดตการควบคุมเครื่องมือวาด

เมื่อสร้างออบเจ็กต์ 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 กลับไปยังแผนที่ด้วย 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 จะปิดอยู่ขณะวาดบนแผนที่