Điều khiển

Chọn nền tảng: Android iOS JavaScript

Tổng quan về chế độ kiểm soát

Bản đồ hiển thị thông qua Maps JavaScript API chứa các phần tử giao diện người dùng để cho phép người dùng tương tác với bản đồ. Các phần tử này được gọi là nút điều khiển và bạn có thể đưa các biến thể của những nút điều khiển này vào ứng dụng của mình. Ngoài ra, bạn có thể không cần làm gì và để Maps JavaScript API xử lý mọi hành vi kiểm soát.

Bản đồ sau đây cho thấy bộ điều khiển mặc định do Maps JavaScript API hiển thị:

Theo chiều kim đồng hồ từ trên cùng bên trái: Loại bản đồ, Toàn màn hình, Camera, Chế độ xem đường phố, Phím tắt.

Dưới đây là danh sách đầy đủ các chế độ điều khiển mà bạn có thể sử dụng trong bản đồ:

• Chế độ kiểm soát Loại bản đồ có sẵn ở kiểu thanh nút thả xuống hoặc ngang, cho phép người dùng chọn một loại bản đồ (ROADMAP, SATELLITE, HYBRID hoặc TERRAIN). Chế độ kiểm soát này xuất hiện theo mặc định ở góc trên cùng bên trái của bản đồ.
• Chế độ điều khiển toàn màn hình cho phép mở bản đồ ở chế độ toàn màn hình. Chế độ kiểm soát này được bật theo mặc định trên máy tính và thiết bị di động. Lưu ý: iOS không hỗ trợ tính năng toàn màn hình. Do đó, chế độ điều khiển toàn màn hình sẽ không xuất hiện trên các thiết bị iOS.
• Tính năng Điều khiển camera có cả chế độ thu phóng và xoay.
• Thanh điều khiển Chế độ xem đường phố có biểu tượng Người hình mắc áo mà bạn có thể kéo vào bản đồ để bật Chế độ xem đường phố. Theo mặc định, chế độ điều khiển này sẽ xuất hiện ở gần dưới cùng bên phải của bản đồ.
• Nút xoay cung cấp cả lựa chọn nghiêng và xoay cho những bản đồ có hình ảnh 3D. Theo mặc định, chế độ điều khiển này sẽ xuất hiện ở gần dưới cùng bên phải của bản đồ. Hãy xem phần Tổng quan về chế độ 3D để biết thêm thông tin.
• Thanh tỷ lệ hiển thị một phần tử tỷ lệ bản đồ. Theo mặc định, chế độ kiểm soát này sẽ bị tắt.
• Chế độ điều khiển phím tắt hiển thị danh sách phím tắt để tương tác với bản đồ.

Bạn không truy cập hoặc sửa đổi trực tiếp các chế độ kiểm soát bản đồ này. Thay vào đó, bạn sẽ sửa đổi các trường MapOptions của bản đồ. Các trường này ảnh hưởng đến khả năng hiển thị và cách trình bày các chế độ kiểm soát. Bạn có thể điều chỉnh cách trình bày chế độ kiểm soát khi khởi tạo bản đồ (bằng MapOptions thích hợp) hoặc sửa đổi bản đồ một cách linh hoạt bằng cách gọi setOptions() để thay đổi các lựa chọn của bản đồ.

Theo mặc định, không phải tất cả các chế độ kiểm soát này đều được bật. Để tìm hiểu về hành vi mặc định của giao diện người dùng (và cách sửa đổi hành vi đó), hãy xem phần Giao diện người dùng mặc định bên dưới.

Giao diện người dùng mặc định

Theo mặc định, tất cả các chế độ điều khiển sẽ biến mất nếu bản đồ quá nhỏ (200x200px). Bạn có thể ghi đè hành vi này bằng cách đặt rõ ràng chế độ kiểm soát để hiển thị. Xem phần Thêm chế độ điều khiển vào Bản đồ.

Hành vi và giao diện của các chế độ kiểm soát là giống nhau trên thiết bị di động và máy tính, ngoại trừ chế độ kiểm soát toàn màn hình (xem hành vi được mô tả trong danh sách các chế độ kiểm soát).

Ngoài ra, chế độ xử lý bàn phím được bật theo mặc định trên tất cả các thiết bị.

Tắt giao diện người dùng mặc định

Bạn có thể muốn tắt hoàn toàn các nút mặc định trên giao diện người dùng của API. Để làm như vậy, hãy đặt thuộc tính disableDefaultUI của bản đồ (trong đối tượng MapOptions) thành true. Thuộc tính này sẽ tắt mọi nút điều khiển giao diện người dùng trong Maps JavaScript API. Tuy nhiên, chế độ này không ảnh hưởng đến cử chỉ bằng chuột hoặc tổ hợp phím trên bản đồ cơ sở. Các cử chỉ và tổ hợp phím này được kiểm soát lần lượt bằng các thuộc tính gestureHandling và keyboardShortcuts.

Đoạn mã sau đây sẽ vô hiệu hoá các nút trên giao diện người dùng:

TypeScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js

Xem ví dụ

Dùng thử mẫu

JSFiddle.net

Thêm các chế độ điều khiển vào bản đồ

Bạn có thể muốn điều chỉnh giao diện bằng cách xoá, thêm hoặc sửa đổi hành vi hoặc các chế độ kiểm soát trên giao diện người dùng và đảm bảo rằng các bản cập nhật trong tương lai không làm thay đổi hành vi này. Nếu chỉ muốn thêm hoặc sửa đổi hành vi hiện có, bạn cần đảm bảo rằng chế độ kiểm soát được thêm rõ ràng vào ứng dụng của mình.

Một số chế độ kiểm soát xuất hiện trên bản đồ theo mặc định, trong khi những chế độ khác sẽ không xuất hiện trừ phi bạn yêu cầu cụ thể. Việc thêm hoặc xoá các chế độ điều khiển khỏi bản đồ được chỉ định trong các trường của đối tượng MapOptions sau. Bạn có thể đặt các trường này thành true để hiển thị hoặc đặt thành false để ẩn:

{
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

Theo mặc định, tất cả các chế độ điều khiển sẽ biến mất nếu bản đồ có kích thước nhỏ hơn 200x200px. Bạn có thể ghi đè hành vi này bằng cách đặt rõ ràng chế độ kiểm soát để hiển thị. Ví dụ: bảng sau đây cho biết chế độ điều khiển camera có hiển thị hay không, dựa trên kích thước bản đồ và chế độ cài đặt của trường cameraControl:

Kích thước bản đồ	cameraControl	Có hiển thị không?
Bất kỳ	false	Không
Bất kỳ	true	Có
>= 200x200px	undefined	Có
< 200x200px	undefined	Không

Ví dụ sau đây đặt bản đồ để ẩn chế độ điều khiển Camera và hiển thị chế độ điều khiển Tỷ lệ. Xin lưu ý rằng chúng tôi không tắt giao diện người dùng mặc định một cách rõ ràng, vì vậy, những sửa đổi này sẽ bổ sung cho hành vi mặc định của giao diện người dùng.

TypeScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js

Xem ví dụ

Dùng thử mẫu

JSFiddle.net

Các chế độ điều khiển

Bạn có thể định cấu hình một số chế độ kiểm soát, cho phép bạn thay đổi hành vi hoặc giao diện của chúng. Ví dụ: chế độ cài đặt Loại bản đồ có thể xuất hiện dưới dạng một thanh ngang hoặc một trình đơn thả xuống.

Bạn có thể sửa đổi các chế độ kiểm soát này bằng cách thay đổi các trường lựa chọn kiểm soát thích hợp trong đối tượng MapOptions khi tạo bản đồ.

Ví dụ: các lựa chọn để thay đổi chế độ điều khiển Loại bản đồ được chỉ ra trong trường mapTypeControlOptions. Chế độ điều khiển Loại bản đồ có thể xuất hiện trong một trong các lựa chọn style sau đây:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR hiển thị mảng các nút điều khiển dưới dạng các nút trong một thanh ngang như trên Google Maps.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU hiển thị một nút điều khiển duy nhất cho phép bạn chọn loại bản đồ bằng trình đơn thả xuống.
• google.maps.MapTypeControlStyle.DEFAULT cho thấy hành vi mặc định, tuỳ thuộc vào kích thước màn hình và có thể thay đổi trong các phiên bản API sau này.

Xin lưu ý rằng nếu sửa đổi bất kỳ lựa chọn kiểm soát nào, bạn cũng nên bật chế độ kiểm soát một cách rõ ràng bằng cách đặt giá trị MapOptions thích hợp thành true. Ví dụ: để đặt một chế độ kiểm soát Loại bản đồ để thể hiện kiểu DROPDOWN_MENU, hãy sử dụng mã sau trong đối tượng MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

Ví dụ sau minh hoạ cách thay đổi vị trí và kiểu mặc định của các chế độ kiểm soát.

TypeScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.js

Xem ví dụ

Dùng thử mẫu

JSFiddle.net

Các chế độ kiểm soát thường được định cấu hình khi bạn tạo bản đồ. Tuy nhiên, bạn có thể thay đổi cách trình bày các chế độ kiểm soát một cách linh hoạt bằng cách gọi phương thức setOptions() của Map, truyền cho phương thức này các lựa chọn kiểm soát mới.

Sửa đổi chế độ kiểm soát

Bạn chỉ định cách trình bày của một chế độ kiểm soát khi tạo bản đồ thông qua các trường trong đối tượng MapOptions của bản đồ. Các trường này được biểu thị dưới đây:

• cameraControl cho phép/không cho phép chế độ điều khiển camera giúp người dùng thu phóng và di chuyển bản đồ. Theo mặc định, chế độ kiểm soát này sẽ xuất hiện trên tất cả các bản đồ. Ngoài ra, trường cameraControlOptions còn chỉ định CameraControlOptions để dùng cho chế độ kiểm soát này.
• mapTypeControl cho phép/không cho phép chế độ điều khiển Loại bản đồ. Chế độ này cho phép người dùng chuyển đổi giữa các loại bản đồ (chẳng hạn như Bản đồ và Vệ tinh). Theo mặc định, chế độ điều khiển này sẽ xuất hiện ở góc trên cùng bên trái của bản đồ. Ngoài ra, trường mapTypeControlOptions còn chỉ định MapTypeControlOptions để dùng cho chế độ kiểm soát này.
• streetViewControl bật/tắt chế độ điều khiển Pegman cho phép người dùng kích hoạt chế độ xem toàn cảnh Đường phố. Theo mặc định, chế độ điều khiển này sẽ hiển thị và xuất hiện ở gần dưới cùng bên phải của bản đồ. Ngoài ra, trường streetViewControlOptions còn chỉ định StreetViewControlOptions để dùng cho chế độ kiểm soát này.
• rotateControl cho phép/không cho phép xuất hiện một nút Xoay để kiểm soát hướng của hình ảnh 3D. Theo mặc định, sự xuất hiện của chế độ điều khiển được xác định bằng sự xuất hiện hoặc không xuất hiện của hình ảnh 3D cho loại bản đồ đã cho ở mức thu phóng và vị trí hiện tại. Bạn có thể thay đổi hành vi của chế độ kiểm soát bằng cách đặt rotateControlOptions của bản đồ để chỉ định RotateControlOptions cần sử dụng. Nút điều khiển này sẽ chỉ xuất hiện trên bản đồ cơ sở 3D.
• scaleControl cho phép bật/tắt chế độ kiểm soát Tỷ lệ, cung cấp tỷ lệ bản đồ. Theo mặc định, chế độ kiểm soát này sẽ không xuất hiện. Khi được bật, nút này sẽ luôn xuất hiện ở góc dưới cùng bên phải của bản đồ. scaleControlOptions cũng chỉ định ScaleControlOptions để dùng cho chế độ kiểm soát này.
• fullscreenControl bật/tắt chế độ điều khiển mở bản đồ ở chế độ toàn màn hình. Theo mặc định, chế độ kiểm soát này sẽ bật theo mặc định trên máy tính và thiết bị Android. Khi được bật, chế độ này sẽ xuất hiện ở gần phía trên cùng bên phải của bản đồ. fullscreenControlOptions cũng chỉ định FullscreenControlOptions để dùng cho chế độ kiểm soát này.

Xin lưu ý rằng bạn có thể chỉ định các lựa chọn cho những chế độ kiểm soát mà bạn tắt ban đầu.

Vị trí của nút điều khiển

Hầu hết các lựa chọn kiểm soát đều chứa một thuộc tính position (thuộc loại ControlPosition) cho biết vị trí đặt chế độ kiểm soát trên bản đồ. Vị trí của các chế độ kiểm soát này không phải là vị trí tuyệt đối. Thay vào đó, API sẽ bố trí các chế độ kiểm soát một cách thông minh bằng cách sắp xếp chúng xung quanh các phần tử bản đồ hiện có hoặc các chế độ kiểm soát khác trong các ràng buộc nhất định (chẳng hạn như kích thước bản đồ).

Có hai loại vị trí điều khiển: vị trí cũ và vị trí logic. Bạn nên sử dụng các giá trị logic để có thể tự động hỗ trợ cả ngữ cảnh bố cục từ trái sang phải (LTR) và từ phải sang trái (RTL). Xem hướng dẫn tham khảo.

Các bảng sau đây cho thấy những vị trí được hỗ trợ của chế độ điều khiển trong ngữ cảnh LTR và RTL.

Vị trí LTR

Vị trí (Ngữ cảnh từ trái sang phải)	Hằng số logic (Nên dùng)	Hằng số cũ
Trên cùng bên trái	BLOCK_START_INLINE_START	TOP_LEFT
Top Center	BLOCK_START_INLINE_CENTER	TOP_CENTER
Trên cùng bên phải	BLOCK_START_INLINE_END	TOP_RIGHT
Trên cùng bên trái	INLINE_START_BLOCK_START	LEFT_TOP
Giữa bên trái	INLINE_START_BLOCK_CENTER	LEFT_CENTER
Dưới cùng bên trái	INLINE_START_BLOCK_END	LEFT_BOTTOM
Trên cùng bên phải	INLINE_END_BLOCK_START	RIGHT_TOP
Trung tâm bản quyền	INLINE_END_BLOCK_CENTER	RIGHT_CENTER
Dưới cùng bên phải	INLINE_END_BLOCK_END	RIGHT_BOTTOM
Dưới cùng bên trái	BLOCK_END_INLINE_START	BOTTOM_LEFT
Dưới cùng ở giữa	BLOCK_END_INLINE_CENTER	BOTTOM_CENTER
Dưới cùng bên phải	BLOCK_END_INLINE_END	BOTTOM_RIGHT

Vị trí RTL

Vị trí (Ngữ cảnh RTL)	Hằng số logic (Nên dùng)	Hằng số cũ
Trên cùng bên phải	BLOCK_START_INLINE_START	TOP_RIGHT
Top Center	BLOCK_START_INLINE_CENTER	TOP_CENTER
Trên cùng bên trái	BLOCK_START_INLINE_END	TOP_LEFT
Trên cùng bên phải	INLINE_START_BLOCK_START	RIGHT_TOP
Trung tâm bản quyền	INLINE_START_BLOCK_CENTER	RIGHT_CENTER
Dưới cùng bên phải	INLINE_START_BLOCK_END	RIGHT_BOTTOM
Trên cùng bên trái	INLINE_END_BLOCK_START	LEFT_TOP
Giữa bên trái	INLINE_END_BLOCK_CENTER	LEFT_CENTER
Dưới cùng bên trái	INLINE_END_BLOCK_END	LEFT_BOTTOM
Dưới cùng bên phải	BLOCK_END_INLINE_START	BOTTOM_RIGHT
Dưới cùng ở giữa	BLOCK_END_INLINE_CENTER	BOTTOM_CENTER
Dưới cùng bên trái	BLOCK_END_INLINE_END	BOTTOM_LEFT

Nhấp vào nhãn để chuyển đổi bản đồ giữa chế độ LTR và RTL.

Xin lưu ý rằng những vị trí này có thể trùng với vị trí của các phần tử trên giao diện người dùng mà bạn không thể sửa đổi vị trí đặt (chẳng hạn như bản quyền và biểu trưng Google). Trong những trường hợp đó, các chế độ kiểm soát sẽ tuân theo logic được ghi nhận cho từng vị trí và xuất hiện gần với vị trí được chỉ định nhất có thể. Không có gì đảm bảo rằng các chế độ kiểm soát sẽ không chồng chéo lên nhau trong bố cục phức tạp, mặc dù API sẽ cố gắng sắp xếp chúng một cách thông minh.

Ví dụ sau đây cho thấy một bản đồ cơ bản có tất cả các chế độ điều khiển được bật, ở các vị trí khác nhau.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;
index.js

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

Xem ví dụ

Dùng thử mẫu

JSFiddle.net Google Cloud Shell

Chế độ kiểm soát tuỳ chỉnh

Ngoài việc sửa đổi kiểu và vị trí của các chế độ kiểm soát API hiện có, bạn có thể tạo các chế độ kiểm soát của riêng mình để xử lý hoạt động tương tác với người dùng. Các nút điều khiển là những tiện ích cố định nằm ở vị trí tuyệt đối trên cùng của bản đồ, không giống như lớp phủ di chuyển cùng với bản đồ cơ bản. Về cơ bản, một chế độ kiểm soát là một phần tử <div> có vị trí tuyệt đối trên bản đồ, hiển thị một số giao diện người dùng cho người dùng và xử lý hoạt động tương tác với người dùng hoặc bản đồ, thường là thông qua một trình xử lý sự kiện.

Để tạo chế độ kiểm soát tuỳ chỉnh của riêng bạn, bạn cần tuân thủ một số quy tắc. Tuy nhiên, bạn có thể áp dụng các nguyên tắc sau đây để đạt được hiệu quả tốt nhất:

• Xác định CSS phù hợp cho(các) phần tử điều khiển cần hiển thị.
• Xử lý hoạt động tương tác với người dùng hoặc bản đồ thông qua trình xử lý sự kiện cho các thay đổi về thuộc tính bản đồ hoặc sự kiện của người dùng (ví dụ: sự kiện 'click').
• Tạo một phần tử <div> để giữ chế độ điều khiển và thêm phần tử này vào thuộc tính controls của Map.

Mỗi mối lo ngại này sẽ được thảo luận bên dưới.

Vẽ các chế độ kiểm soát tuỳ chỉnh

Bạn có thể tuỳ ý vẽ nút điều khiển. Nhìn chung, bạn nên đặt tất cả nội dung trình bày của chế độ kiểm soát trong một phần tử <div> duy nhất để có thể thao tác với chế độ kiểm soát dưới dạng một đơn vị. Chúng ta sẽ sử dụng mẫu thiết kế này trong các mẫu minh hoạ bên dưới.

Để thiết kế các chế độ kiểm soát hấp dẫn, bạn cần có kiến thức về CSS và cấu trúc DOM. Các ví dụ về mã sau đây minh hoạ cách thêm chế độ kiểm soát tuỳ chỉnh bằng cả HTML khai báo và phương thức theo chương trình.

CSS khai báo

Các kiểu CSS sau đây cung cấp giao diện nhất quán với các chế độ điều khiển mặc định. Sử dụng các kiểu này với cả hai ví dụ bên dưới:

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

HTML khai báo

Các đoạn mã này cho biết cách tạo một chế độ kiểm soát tuỳ chỉnh một cách khai báo. Trong HTML, một DIV có mã nhận dạng container được dùng để định vị chế độ điều khiển; DIV này được lồng trong phần tử gmp-map và nút được thêm vào DIV. Thuộc tính slot được đặt thành control-inline-start-block-start để định vị chế độ điều khiển ở góc trên cùng bên trái của bản đồ.

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

Trong JavaScript, getElementById() được dùng để tìm DIV và nút, trình nghe sự kiện được thêm vào nút và nút được thêm vào DIV.

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

JavaScript có lập trình

Đoạn mã này minh hoạ cách tạo một nút điều khiển theo phương thức lập trình. Các kiểu CSS được xác định ở trên.

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

Xử lý các sự kiện từ các chế độ điều khiển tuỳ chỉnh

Để có thể sử dụng, chế độ cài đặt phải thực sự có tác dụng. Bạn có thể tuỳ ý quyết định chức năng của chế độ cài đặt này. Thành phần này có thể phản hồi hoạt động đầu vào của người dùng hoặc phản hồi các thay đổi về trạng thái của Map.

Để phản hồi thông tin đầu vào của người dùng, hãy sử dụng addEventListener(). Thành phần này xử lý các sự kiện DOM được hỗ trợ. Đoạn mã sau đây thêm một trình nghe cho sự kiện 'click' của trình duyệt. Xin lưu ý rằng sự kiện này được nhận từ DOM, chứ không phải từ bản đồ.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

Tạo các chế độ kiểm soát tuỳ chỉnh dễ tiếp cận

Để đảm bảo các thành phần nhận được sự kiện từ bàn phím và xuất hiện chính xác với trình đọc màn hình, hãy làm như sau:

• Luôn sử dụng các phần tử HTML gốc cho nút, phần tử biểu mẫu và nhãn. Chỉ sử dụng phần tử DIV làm vùng chứa để giữ các chế độ kiểm soát gốc; không bao giờ sử dụng lại DIV làm phần tử giao diện người dùng tương tác.
• Hãy sử dụng phần tử label, thuộc tính title hoặc thuộc tính aria-label (nếu thích hợp) để cung cấp thông tin về một phần tử trên giao diện người dùng.

Vị trí của các chế độ kiểm soát tuỳ chỉnh

Sử dụng thuộc tính slot để định vị các chế độ kiểm soát tuỳ chỉnh, chỉ định vị trí cần thiết của chế độ kiểm soát. Để biết thông tin về các vị trí này, hãy xem phần Vị trí của chế độ điều khiển ở trên.

Mỗi ControlPosition lưu trữ một MVCArray của các chế độ điều khiển hiển thị ở vị trí đó. Do đó, khi các chế độ điều khiển được thêm hoặc xoá khỏi vị trí, API sẽ cập nhật các chế độ điều khiển cho phù hợp.

Đoạn mã sau đây tạo một chế độ điều khiển tuỳ chỉnh mới (không hiển thị hàm khởi tạo) và thêm chế độ điều khiển đó vào bản đồ ở vị trí BLOCK_START_INLINE_END (trên cùng bên phải trong ngữ cảnh từ trái sang phải).

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

Để đặt vị trí cho một thành phần tuỳ chỉnh theo cách khai báo, hãy đặt thuộc tính slot trong HTML:

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

Ví dụ về chế độ cài đặt tuỳ chỉnh

Thành phần điều khiển sau đây rất đơn giản (mặc dù không đặc biệt hữu ích) và kết hợp các mẫu được trình bày ở trên. Thành phần này phản hồi các sự kiện 'click' DOM bằng cách đặt bản đồ vào giữa tại một vị trí mặc định nhất định:

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

Xem ví dụ

Dùng thử mẫu

JSFiddle.net Google Cloud Shell

Thêm trạng thái vào các chế độ điều khiển

Các thành phần điều khiển cũng có thể lưu trữ trạng thái. Ví dụ sau đây tương tự như ví dụ đã trình bày trước đó, nhưng thành phần này có thêm nút "Đặt nhà" để đặt thành phần này hiển thị vị trí nhà mới. Chúng ta làm như vậy bằng cách tạo một thuộc tính home_ trong thành phần để lưu trữ trạng thái này và cung cấp phương thức getter và setter cho trạng thái đó.

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

Xem ví dụ

Dùng thử mẫu

JSFiddle.net Google Cloud Shell