Lớp vẽ (Thư viện)
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
- Tổng quan
- Sử dụng thư viện
- Tuỳ chọn DrawingManager
- Cập nhật thành phần điều khiển Công cụ vẽ
- 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, đa tuyến, hình tròn và điểm đánh dấu trên bản đồ.
Sử dụng Thư viện
Bộ công cụ vẽ là một thư viện độc lập, tách biệt với mã JavaScript API Maps chính. Để sử dụng chức năng có trong thư viện này, trước tiên, bạn phải tải chức năng đó bằng tham số libraries trong URL 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 đối tượng DrawingManager như sau:
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
Tuỳ chọn DrawingManager
Hàm khởi tạo DrawingManager lấy một tập hợp các tuỳ chọn 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à 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 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 chế độ hiển thị của giao diện lựa chọn công cụ vẽ trên bản đồ. Phương thức này chấp nhận một giá trị boolean.
- Bạn cũng có thể xác định vị trí của thành phần điều khiển và các loại lớp phủ cần được biểu thị trong thành phần điều khiển bằng cách 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 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ủ để đưa vào bộ chọn hình dạng điều khiển 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 thành phần điều khiển sẽ khớp với thứ tự khai báo các công cụ đó trong mảng.
- Bạn có thể chỉ định một tập hợp thuộc tính mặc định cho mỗi loại lớp phủ. Tập hợp này sẽ xác định giao diện của lớp phủ khi được tạo lần đầu. Các thuộc tính này được xác định trong thuộc tính
{overlay}Options của lớp phủ đó (trong đó {overlay} đại diện cho loại lớp phủ). Ví dụ: bạn có thể xác định các thuộc tính tô màu, thuộc tính nét vẽ, zIndex và khả năng nhấp của một vòng tròn bằng thuộc tính circleOptions. Nếu bất kỳ giá trị kích thước, vị trí hoặc bản đồ nào được truyền, thì các giá trị đó sẽ bị bỏ qua.
Để biết thông tin đầy đủ 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 ý: Để tạo một hình dạng người dùng có thể chỉnh sửa sau khi tạo, hãy đặt thuộc tính editable thành true.
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 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 thành phần điều khiển bản vẽ sẽ khiến thành phần điều khiển 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 hoạt động.
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. Việc 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 tính năng vẽ.
Sự kiện vẽ
Khi một lớp phủ hình dạng được tạo, hai sự kiện sẽ được kích hoạt:
- Sự kiện
{overlay}complete (trong đó {overlay} đại diện cho loại lớp phủ, chẳng hạn như circlecomplete, polygoncomplete, v.v.). 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à 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 đồ.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-08-06 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-08-06 UTC."],[[["\u003cp\u003eThe \u003ccode\u003eDrawingManager\u003c/code\u003e class in the Google Maps JavaScript API enables users to draw shapes like polygons, circles, and markers directly on the map.\u003c/p\u003e\n"],["\u003cp\u003eTo utilize the Drawing Tools, include the \u003ccode\u003elibraries=drawing\u003c/code\u003e parameter in the Maps API bootstrap URL when loading the API.\u003c/p\u003e\n"],["\u003cp\u003eCustomize the drawing experience by configuring options like \u003ccode\u003edrawingMode\u003c/code\u003e, \u003ccode\u003edrawingControl\u003c/code\u003e, and shape-specific properties using the \u003ccode\u003eDrawingManager\u003c/code\u003e constructor and \u003ccode\u003esetOptions()\u003c/code\u003e method.\u003c/p\u003e\n"],["\u003cp\u003eDrawing events such as \u003ccode\u003e{overlay}complete\u003c/code\u003e and \u003ccode\u003eoverlaycomplete\u003c/code\u003e are triggered when shapes are created, providing access to the drawn overlay for further manipulation.\u003c/p\u003e\n"],["\u003cp\u003eWhile drawing is active, standard Google Maps events like \u003ccode\u003eclick\u003c/code\u003e and \u003ccode\u003emousemove\u003c/code\u003e are temporarily disabled on the map.\u003c/p\u003e\n"]]],[],null,["1. [Overview](#overview)\n2. [Using the Library](#using_the_library)\n3. [DrawingManager Options](#drawingmanager_options)\n4. [Updating the Drawing Tools Control](#updating_the_drawing_tools_control)\n5. [Drawing Events](#drawing_events)\n\nOverview\n\nThe `DrawingManager` class provides a graphical interface for users to draw\npolygons, rectangles, polylines, circles, and markers on the map.\n\nUsing the Library\n\nThe Drawing Tools are a self-contained library, separate from the main Maps\nAPI JavaScript code. To use the functionality contained within this library,\nyou must first load it using the [`libraries`](/maps/documentation/javascript/libraries) parameter in the\nMaps API bootstrap URL: \n\n```html\n\u003cscript async\n src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap\"\u003e\n\u003c/script\u003e\n```\n\nOnce you've added the libraries parameter, you can create a `DrawingManager`\nobject as follows: \n\n```javascript\nvar drawingManager = new google.maps.drawing.DrawingManager();\ndrawingManager.setMap(map);\n```\n\nDrawingManager Options\n\nThe `DrawingManager` constructor takes a set of options that define the set of\ncontrols to display, the position of the control, and the initial drawing\nstate.\n\n- The `drawingMode` property of the `DrawingManager` defines the initial drawing state of the DrawingManager. It accepts a [`google.maps.drawing.OverlayType`](/maps/documentation/javascript/reference#OverlayType) constant. Default is `null`, in which case the cursor is in a non-drawing mode when the DrawingManager is initialized.\n- The `drawingControl` property of the `DrawingManager` defines the visibility of the drawing tools selection interface on the map. It accepts a boolean value.\n- You can also define the position of the control, and the types of overlays that should be represented in the control, using the `drawingControlOptions` property of the `DrawingManager`.\n - `position` defines the position of the drawing control on the map, and accepts a [`google.maps.ControlPosition`](/maps/documentation/javascript/reference#ControlPosition) constant.\n - `drawingModes` is an array of [`google.maps.drawing.OverlayType`](/maps/documentation/javascript/reference#OverlayType) constants, and defines the overlay types to include in the drawing control shape picker. The hand icon will always be present, allowing the user to interact with the map without drawing. The order of the tools in the control will match the order in which they are declared in the array.\n- Each type of overlay can be assigned a set of default properties, that define the appearance of the overlay when first created. These are defined in that overlay's `{overlay}Options` property (where `{overlay}` represents the overlay type). For example, a circle's fill properties, stroke properties, zIndex, and clickability can be defined with the `circleOptions` property. If any size, location, or map values are passed, they are ignored. For full details of which properties can be set, refer to the [API Reference documentation](/maps/documentation/javascript/reference#DrawingManagerOptions).\n\n**Note:** To make a shape [user-editable](/maps/documentation/javascript/shapes#editable) after it has\nbeen created, set its `editable` property to `true`. \n\nTypeScript \n\n```typescript\n// This example requires the Drawing library. Include the libraries=drawing\n// parameter when you first load the API. For example:\n// \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing\"\u003e\n\nfunction initMap(): void {\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 8,\n }\n );\n\n const drawingManager = new google.maps.drawing.DrawingManager({\n drawingMode: google.maps.drawing.OverlayType.MARKER,\n drawingControl: true,\n drawingControlOptions: {\n position: google.maps.ControlPosition.TOP_CENTER,\n drawingModes: [\n google.maps.drawing.OverlayType.MARKER,\n google.maps.drawing.OverlayType.CIRCLE,\n google.maps.drawing.OverlayType.POLYGON,\n google.maps.drawing.OverlayType.POLYLINE,\n google.maps.drawing.OverlayType.RECTANGLE,\n ],\n },\n markerOptions: {\n icon: \"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png\",\n },\n circleOptions: {\n fillColor: \"#ffff00\",\n fillOpacity: 1,\n strokeWeight: 5,\n clickable: false,\n editable: true,\n zIndex: 1,\n },\n });\n\n drawingManager.setMap(map);\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/drawing-tools/index.ts#L8-L55\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\n// This example requires the Drawing library. Include the libraries=drawing\n// parameter when you first load the API. For example:\n// \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing\"\u003e\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 8,\n });\n const drawingManager = new google.maps.drawing.DrawingManager({\n drawingMode: google.maps.drawing.OverlayType.MARKER,\n drawingControl: true,\n drawingControlOptions: {\n position: google.maps.ControlPosition.TOP_CENTER,\n drawingModes: [\n google.maps.drawing.OverlayType.MARKER,\n google.maps.drawing.OverlayType.CIRCLE,\n google.maps.drawing.OverlayType.POLYGON,\n google.maps.drawing.OverlayType.POLYLINE,\n google.maps.drawing.OverlayType.RECTANGLE,\n ],\n },\n markerOptions: {\n icon: \"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png\",\n },\n circleOptions: {\n fillColor: \"#ffff00\",\n fillOpacity: 1,\n strokeWeight: 5,\n clickable: false,\n editable: true,\n zIndex: 1,\n },\n });\n\n drawingManager.setMap(map);\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/drawing-tools/docs/index.js#L7-L44\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n[View example](/maps/documentation/javascript/examples/drawing-tools)\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/drawing-tools/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-drawing-tools&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nUpdating the Drawing Tools Control\n\nOnce the `DrawingManager` object has been created, you can update it by\ncalling `setOptions()` and passing new values. \n\n```javascript\ndrawingManager.setOptions({\n drawingControlOptions: {\n position: google.maps.ControlPosition.BOTTOM_LEFT,\n drawingModes: ['marker']\n }\n});\n```\n\nTo hide or show the drawing tools control: \n\n```javascript\n// To hide:\ndrawingManager.setOptions({\n drawingControl: false\n});\n\n// To show:\ndrawingManager.setOptions({\n drawingControl: true\n});\n```\n\nTo remove the drawing tools control from the `map` object: \n\n```javascript\ndrawingManager.setMap(null);\n```\n\n*Hiding* the drawing control causes the drawing tools control to not display,\nbut all of the functionality of the `DrawingManager` class is still available.\nIn this way, you can implement your own control, if desired. *Removing* the\n`DrawingManager` from the `map` object disables all drawing functionality; it\nmust be reattached to the map with `drawingManager.setMap(map)`, or a new\n`DrawingManager` object constructed, if drawing features are to be restored.\n\nDrawing Events\n\nWhen a shape overlay is created, two events are fired:\n\n- An `{overlay}complete` event (where `{overlay}` represents the overlay type, such as `circlecomplete`, `polygoncomplete`, etc). A reference to the overlay is passed as an argument.\n- An `overlaycomplete` event. An object literal, containing the `OverlayType` and a reference to the overlay, is passed as an argument.\n\n```javascript\ngoogle.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {\n var radius = circle.getRadius();\n});\n\ngoogle.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {\n if (event.type == 'circle') {\n var radius = event.overlay.getRadius();\n }\n});\n```\n\nNote that [`google.maps.Map`](/maps/documentation/javascript/reference#Map)\nevents, such as `click` and `mousemove` are disabled while drawing on the map."]]
