Lớp vẽ (Thư viện)

  1. Tổng quan
  2. Sử dụng Thư viện
  3. Các lựa chọn DrawingManager
  4. Cập nhật chế độ điều khiển Công cụ vẽ
  5. Sự kiện vẽ

Tổng quan

Lớp DrawingManager cung cấp giao diện đồ hoạ để người dùng vẽ đa giác, hình chữ nhật, đường nhiều đoạn, hình tròn và điểm đánh dấu trên bản đồ.

Sử dụng Thư viện

Công cụ vẽ là một thư viện độc lập, tách biệt với mã JavaScript chính của Maps API. Để sử dụng chức năng có trong thư viện này, trước tiên, bạn phải tải thư viện này bằng cách sử dụng tham số libraries trong URL khởi động Maps API:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>

Sau khi thêm tham số thư viện, bạn có thể tạo một đối tượng DrawingManager như sau:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Các lựa chọn DrawingManager

Hàm dựng DrawingManager lấy một tập hợp các lựa chọn xác định tập hợp các chế độ điều khiển cần hiển thị, vị trí của chế độ điều khiển và trạng thái vẽ ban đầu.

  • Thuộc tính drawingMode của DrawingManager xác định trạng thái vẽ ban đầu của DrawingManager. Phương thức này chấp nhận một hằng số google.maps.drawing.OverlayType. Giá trị mặc định là null. Trong trường hợp này, con trỏ sẽ ở chế độ không vẽ khi DrawingManager được khởi chạy.
  • Thuộc tính drawingControl của DrawingManager xác định khả năng hiển thị của giao diện lựa chọn công cụ vẽ trên bản đồ. Trường này chấp nhận một giá trị boolean.
  • Bạn cũng có thể xác định vị trí của chế độ kiểm soát và các loại lớp phủ cần được biểu thị trong chế độ kiểm soát bằng cách sử dụng thuộc tính drawingControlOptions của DrawingManager.
    • position xác định vị trí của chế độ kiểm soát bản vẽ trên bản đồ và chấp nhận hằng số google.maps.ControlPosition.
    • drawingModes là một mảng các hằng số google.maps.drawing.OverlayType và xác định các loại lớp phủ cần đưa vào bộ chọn hình dạng của chế độ kiểm soát bản vẽ. Biểu tượng bàn tay sẽ luôn xuất hiện, cho phép người dùng tương tác với bản đồ mà không cần vẽ. Thứ tự của các công cụ trong chế độ kiểm soát sẽ khớp với thứ tự mà các công cụ đó được khai báo trong mảng.
  • Bạn có thể chỉ định một tập hợp các thuộc tính mặc định cho từng loại lớp phủ. Các thuộc tính này xác định giao diện của lớp phủ khi được tạo lần đầu. Các giá trị này được xác định trong thuộc tính {overlay}Options của lớp phủ đó (trong đó {overlay} biểu thị loại lớp phủ). Ví dụ: bạn có thể xác định các thuộc tính tô, thuộc tính nét vẽ, zIndex và khả năng nhấp của một hình tròn bằng thuộc tính circleOptions. Nếu bạn truyền bất kỳ giá trị kích thước, vị trí hoặc bản đồ nào, thì các giá trị đó sẽ bị bỏ qua. Để biết đầy đủ thông tin về những thuộc tính có thể được đặt, hãy tham khảo Tài liệu tham khảo API.

Lưu ý: Để người dùng có thể chỉnh sửa hình dạng sau khi tạo, hãy đặt thuộc tính editable của hình dạng đó thành 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
Xem ví dụ

Dùng thử mẫu

Cập nhật chế độ điều khiển Công cụ vẽ

Sau khi tạo đối tượng DrawingManager, bạn có thể cập nhật đối tượng này bằng cách gọi setOptions() và truyền các giá trị mới.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

Cách ẩn hoặc hiện chế độ điều khiển công cụ vẽ:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

Cách xoá chế độ điều khiển công cụ vẽ khỏi đối tượng map:

drawingManager.setMap(null);

Việc ẩn chế độ kiểm soát bản vẽ sẽ khiến chế độ kiểm soát công cụ vẽ không hiển thị, nhưng tất cả chức năng của lớp DrawingManager vẫn có sẵn. Bằng cách này, bạn có thể triển khai chế độ kiểm soát của riêng mình. Xoá DrawingManager khỏi đối tượng map sẽ vô hiệu hoá mọi chức năng vẽ; bạn phải đính kèm lại đối tượng này vào bản đồ bằng drawingManager.setMap(map) hoặc tạo một đối tượng DrawingManager mới nếu muốn khôi phục các đối tượng vẽ.

Sự kiện vẽ

Khi một lớp phủ hình dạng được tạo, 2 sự kiện sẽ được kích hoạt:

  • Sự kiện {overlay}complete (trong đó {overlay} biểu thị loại lớp phủ, chẳng hạn như circlecomplete, polygoncomplete, v.v.). Một tham chiếu đến lớp phủ được truyền dưới dạng đối số.
  • Sự kiện overlaycomplete. Một đối tượng cố định chứa OverlayType và một tham chiếu đến lớp phủ được truyền dưới dạng đối số.
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();
  }
});

Xin lưu ý rằng các sự kiện google.maps.Map, chẳng hạn như click và mousemove sẽ bị tắt trong khi vẽ trên bản đồ.