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

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

ภาพรวม

คลาส 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;
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 ถูกปิดใช้งานขณะวาดบนแผนที่