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

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

ภาพรวม

คลาส 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;
index.ts

หมายเหตุ: อ่านคู่มือเกี่ยวกับการใช้ TypeScript และ Google Maps

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

หมายเหตุ: JavaScript จะรวบรวมจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

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

JSFiddle.net Google Cloud Shell

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

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