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

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