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

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

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, hình nhiều đường, 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 Maps chính Mã JavaScript 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 tệp bằng cách sử dụng tham số libraries trong URL tự động khởi động của API Maps:

<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 DrawingManager đối tượng như sau:

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

Các tuỳ chọn DrawingManager

Hàm khởi tạo DrawingManager lấy một tập hợp các tuỳ chọn giúp xác định tập hợp các thành phần điều khiển hiển thị, vị trí của thành phần điều khiển và bản vẽ ban đầu trạng thái.

  • Thuộc tính drawingMode của DrawingManager xác định giá trị ban đầu trạng thái vẽ của DrawingManager. Ứng dụng này chấp nhận một google.maps.drawing.OverlayType hằng số. Giá trị mặc định là null, trong trường hợp này con trỏ nằm ở dạng không phải là bản vẽ khi khởi chạy DrawingManager.
  • Thuộc tính drawingControl của DrawingManager xác định chế độ hiển thị giao diện chọn công cụ vẽ trên bản đồ. Ứng dụ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ủ nên được thể hiện trong phần điều khiển, sử dụng Thuộc tính drawingControlOptions của DrawingManager.
    • position xác định vị trí của thành phần điều khiển bản vẽ trên bản đồ và chấp nhận một google.maps.ControlPosition hằng số.
    • drawingModes là một mảng Hằng số google.maps.drawing.OverlayType và xác định các loại lớp phủ cần đưa vào hình dạng điều khiển bản vẽ bộ chọn. 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 kiểm soát sẽ khớp với thứ tự mà chúng được khai báo trong mảng.
  • Mỗi loại lớp phủ có thể được gán một tập hợp các thuộc tính mặc định, đó là xác định giao diện của lớp phủ khi được tạo lần đầu tiên. Các trường 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ụ: thuộc tính tô màu nền của vòng tròn, nét vẽ bạn có thể xác định các thuộc tính, zIndex và khả năng nhấp bằng circleOptions thuộc tính này. Nếu có bất kỳ giá trị kích thước, vị trí hoặc bản đồ nào được chuyển, chúng sẽ bị bỏ qua. Để biết toàn bộ thông tin chi tiết 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 ý: Để làm cho hình dạng người dùng có thể chỉnh sửa sau khi hình dạng đó đã được tạo, hãy đặt thuộc tính editable 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 đó 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 các tuỳ chọn đ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);

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

Vẽ sự kiện

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

  • Mộ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.). Đáp tham chiếu đến lớp phủ được truyền dưới dạng đối số.
  • Một sự kiện overlaycomplete. Đối tượng bằng chữ, chứa OverlayType và 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();
  }
});

Lưu ý rằng google.maps.Map các sự kiện như click và mousemove bị tắt khi vẽ trên bản đồ.