Điều khiển

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

Tổng quan về chế độ điều khiển

Các bản đồ hiển thị thông qua API JavaScript của Maps chứa các thành phần 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à các chế độ điều khiển và bạn có thể đưa các biến thể của các chế độ điều khiển này vào ứng dụng của mình. Ngoài ra, bạn có thể không làm gì cả và để API JavaScript của Maps xử lý mọi hành vi điều khiển.

Bản đồ sau đây cho thấy tập hợp các chế độ điều khiển mặc định do API JavaScript của Maps hiển thị:

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 đồ:

  • Bộ điều khiển thu phóng hiển thị các nút "+" và "-" để thay đổi mức thu phóng của bản đồ. Theo mặc định, tùy chọn điều khiển này sẽ xuất hiện ở góc dưới cùng bên phải của bản đồ.
  • Camera control (Chế độ điều khiển máy ảnh) có cả tính năng thu phóng và xoay, đồng thời hiển thị theo mặc định thay cho tính năng thu phóng khi sử dụng kênh beta.
  • Chế độ điều khiển Loại bản đồ có sẵn ở kiểu trình đơn thả xuống hoặc thanh nút ngang, cho phép người dùng chọn loại bản đồ (ROADMAP, SATELLITE, HYBRID hoặc TERRAIN). Theo mặc định, chế độ điều khiển này xuất hiện ở góc trên cùng bên trái của bản đồ.
  • Bộ điều khiển Chế độ xem đường phố chứa biểu tượng Người hình mắc áo. Bạn có thể kéo biểu tượng này vào bản đồ để bật Chế độ xem đường phố. Theo mặc định, tùy chọn đ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 đồ.
  • Chế độ điều khiển xoay cung cấp tổ hợp các tuỳ chọn nghiêng và xoay cho bản đồ chứa hình ảnh xiên. Theo mặc định, tùy chọn đ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 Hình ảnh 45° để biết thêm thông tin.
  • Bộ điều khiển tỷ lệ hiển thị một phần tử tỷ lệ bản đồ. Chế độ kiểm soát này bị tắt theo mặc định.
  • Chế độ điều khiển toàn màn hình cung cấp tuỳ chọn 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 hiển thị trên các thiết bị iOS.
  • Bộ đ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 trực tiếp truy cập hoặc sửa đổi các chế độ điều khiển 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 chế độ hiển thị và cách trình bày các chế độ điều khiển. Bạn có thể điều chỉnh cách trình bày thành phần điều khiển khi tạo bản đồ (bằng MapOptions thích hợp) hoặc sửa đổi bản đồ một cách linh động bằng cách gọi setOptions() để thay đổi các tuỳ 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 giao diện người dùng mặc định (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 chế độ hiển thị thành hiển thị rõ ràng. Xem phần Thêm các chế độ điều khiển vào bản đồ.

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

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

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

Bạn nên tắt hoàn toàn các nút giao diện người dùng mặc định của API. Để thực hiện việc nà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 tắt mọi nút điều khiển giao diện người dùng trong API JavaScript của Maps. Tuy nhiên, thuộc tính này không ảnh hưởng đến cử chỉ chuột hoặc phím tắt trên bản đồ cơ sở, do các thuộc tính gestureHandling và keyboardShortcuts kiểm soát tương ứng.

Mã sau đây sẽ tắt các nút trên giao diện người dùng:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js
Xem ví dụ

Thử mẫu

Thêm các nút điều khiển vào bản đồ

Bạn có thể đ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ế độ điều khiển 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 thành phần điều khiển được thêm vào ứng dụng một cách rõ ràng.

Một số chế độ điều khiển xuất hiện trên bản đồ theo mặc định, trong khi một số 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 thành phần điều khiển khỏi bản đồ được chỉ định trong các trường của đối tượng MapOptions sau đây. Bạn đặt các trường này thành true để hiển thị hoặc đặt thành false để ẩn các trường đó:

{
  zoomControl: boolean,
  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 chế độ hiển thị thành hiển thị rõ ràng. Ví dụ: bảng sau đây cho biết liệu chế độ điều khiển thu phóng 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 zoomControl:

Kích thước bản đồ zoomControl 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 thiết lập bản đồ để ẩn chế độ điều khiển Thu phóng và hiển thị chế độ điều khiển Tỷ lệ. Xin lưu ý rằng chúng ta không tắt rõ ràng giao diện người dùng mặc định, vì vậy, những sửa đổi này sẽ bổ sung vào hành vi của giao diện người dùng mặc định.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;
index.js
Xem ví dụ

Thử mẫu

Tuỳ chọn điều khiển

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

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

Ví dụ: các tuỳ chọn để thay đổi thành phần điều khiển Loại bản đồ được chỉ định trong trường mapTypeControlOptions. Thành phần điều khiển Loại bản đồ có thể xuất hiện trong một trong các tuỳ chọn style sau:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR hiển thị một loạt các nút điều khiển dưới dạng các nút trong một thanh ngang như hiển thị trên Google Maps.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU hiển thị một chế độ điều khiển nút 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 hiển thị 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ỳ tuỳ chọn điều khiển nào, bạn cũng nên bật rõ ràng tuỳ chọn điều khiển đó bằng cách đặt giá trị MapOptions thích hợp thành true. Ví dụ: để đặt chế độ điều khiển Loại bản đồ hiển thị 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 đây minh hoạ cách thay đổi vị trí và kiểu điều khiển mặc định.

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

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

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;
index.js
Xem ví dụ

Thử mẫu

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

Sửa đổi chế độ điều khiển

Bạn chỉ định cách trình bày của một thành phần điều khiển 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:

  • zoomControl bật/tắt chế độ điều khiển Thu phóng. Theo mặc định, tuỳ chọn đ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 zoomControlOptions còn chỉ định ZoomControlOptions để sử dụng cho thành phần điều khiển này.
  • cameraControl bật/tắt chế độ điều khiển máy ảnh. Theo mặc định, chế độ điều khiển này sẽ hiển thị trên bản đồ sử dụng kênh thử nghiệm. Trường cameraControlOptions cũng chỉ định CameraControlOptions để sử dụng cho thành phần điều khiển này.
  • mapTypeControl bật/tắt chế độ điều khiển Loại bản đồ 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à Bản đồ vệ tinh). Theo mặc định, chế độ điều khiển này sẽ hiển thị ở 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 để sử dụng cho thành phần điều khiển này.
  • streetViewControl bật/tắt chế độ điều khiển Pegman cho phép người dùng kích hoạt ảnh toàn cảnh trên Chế độ xem đường phố. Theo mặc định, tùy chọn điều khiển này sẽ hiển thị và xuất hiện ở gần cuối bên phải của bản đồ. Ngoài ra, trường streetViewControlOptions còn chỉ định StreetViewControlOptions để sử dụng cho thành phần điều khiển này.
  • rotateControl bật/tắt giao diện của chế độ điều khiển Xoay để kiểm soát hướng của hình ảnh 45°. Theo mặc định, sự hiện diện của thành phần điều khiển được xác định bằng việc có hay không có hình ảnh 45° cho loại bản đồ nhất định ở mức thu phóng và vị trí hiện tại. Bạn có thể thay đổi hành vi của thành phần điều khiển bằng cách đặt rotateControlOptions của bản đồ để chỉ định RotateControlOptions cần sử dụng. Bạn không thể hiển thị chế độ điều khiển nếu không có hình ảnh 45°.
  • scaleControl bật/tắt chế độ điều khiển Tỷ lệ cung cấp tỷ lệ bản đồ. Theo mặc định, chế độ điều khiển này không hiển thị. Khi được bật, biểu tượng này sẽ luôn xuất hiện ở góc dưới cùng bên phải của bản đồ. Ngoài ra, scaleControlOptions còn chỉ định ScaleControlOptions để sử dụng cho thành phần điều khiển 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 được bật trên máy tính và thiết bị Android. Khi được bật, chế độ điều khiển sẽ xuất hiện ở gần phía trên cùng bên phải của bản đồ. Ngoài ra, fullscreenControlOptions còn chỉ định FullscreenControlOptions để sử dụng cho thành phần điều khiển này.

Xin lưu ý rằng bạn có thể chỉ định các tuỳ chọn cho các chế độ kiểm soát mà bạn vô hiệu hoá ban đầu.

Kiểm soát vị trí

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

Lưu ý: Không thể đảm bảo rằng các thành phần điều khiển sẽ không trùng lặp với các bố cục phức tạp, mặc dù API sẽ cố gắng sắp xếp các thành phần đó một cách thông minh.

Các vị trí điều khiển sau đây được hỗ trợ:

  • TOP_CENTER cho biết bạn nên đặt thành phần điều khiển ở giữa trên cùng của bản đồ.
  • TOP_LEFT cho biết bạn nên đặt thành phần điều khiển dọc theo góc trên cùng bên trái của bản đồ, với mọi thành phần phụ của thành phần điều khiển "chảy" về phía giữa trên cùng.
  • TOP_RIGHT cho biết bạn nên đặt thành phần điều khiển dọc theo góc trên cùng bên phải của bản đồ, với mọi thành phần phụ của thành phần điều khiển "chảy" về giữa trên cùng.
  • LEFT_TOP cho biết bạn nên đặt thành phần điều khiển dọc theo góc trên cùng bên trái của bản đồ, nhưng bên dưới mọi phần tử TOP_LEFT.
  • RIGHT_TOP cho biết bạn nên đặt thành phần điều khiển ở góc trên cùng bên phải của bản đồ, nhưng bên dưới mọi phần tử TOP_RIGHT.
  • LEFT_CENTER cho biết bạn nên đặt thành phần điều khiển dọc theo bên trái của bản đồ, ở giữa các vị trí TOP_LEFT và BOTTOM_LEFT.
  • RIGHT_CENTER cho biết bạn nên đặt thành phần điều khiển dọc theo bên phải của bản đồ, ở giữa các vị trí TOP_RIGHT và BOTTOM_RIGHT.
  • LEFT_BOTTOM cho biết bạn nên đặt thành phần điều khiển ở phía dưới cùng bên trái của bản đồ, nhưng phía trên mọi phần tử BOTTOM_LEFT.
  • RIGHT_BOTTOM cho biết bạn nên đặt thành phần điều khiển ở dưới cùng bên phải của bản đồ, nhưng phía trên mọi phần tử BOTTOM_RIGHT.
  • BOTTOM_CENTER cho biết bạn nên đặt thành phần điều khiển ở giữa dưới cùng của bản đồ.
  • BOTTOM_LEFT cho biết bạn nên đặt thành phần điều khiển dọc theo phía dưới cùng bên trái của bản đồ, với mọi phần tử phụ của thành phần điều khiển "chảy" về giữa dưới cùng.
  • BOTTOM_RIGHT cho biết bạn nên đặt thành phần điều khiển ở phía dưới cùng bên phải của bản đồ, với mọi phần tử phụ của thành phần điều khiển "chảy" về giữa dưới cùng.

Xin lưu ý rằng các vị trí này có thể trùng với vị trí của các thành phần giao diện người dùng mà bạn không được sửa đổi vị trí (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ế độ điều khiển sẽ tuân theo logic được ghi chú cho từng vị trí và xuất hiện gần nhất có thể với vị trí được chỉ định.

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

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

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
Xem ví dụ

Thử mẫu

Chế độ điều khiển tuỳ chỉnh

Ngoài việc sửa đổi kiểu và vị trí của các chế độ điều khiển API hiện có, bạn cũng có thể tạo các chế độ điều khiển của riêng mình để xử lý hoạt động tương tác với người dùng. Các thành phần điều khiển là các tiện ích cố định nổi trên đầu bản đồ ở các vị trí tuyệt đối, trái ngược với lớp phủ di chuyển cùng với bản đồ cơ bản. Về cơ bản, thành phần điều khiển 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 thông qua một trình xử lý sự kiện.

Để tạo thành phần điều khiển tuỳ chỉnh của riêng bạn, bạn chỉ cần một vài quy tắc. Tuy nhiên, bạn có thể áp dụng các nguyên tắc sau đây như một phương pháp hay nhất:

  • Xác định CSS thích hợp cho(các) phần tử điều khiể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> để lưu giữ thành phần điều khiển và thêm phần tử này vào thuộc tính controls của Map.

Mỗi vấn đề này được thảo luận bên dưới.

Vẽ các chế độ điều khiển tuỳ chỉnh

Bạn có thể tự do vẽ thành phần điều khiển. Nhìn chung, bạn nên đặt tất cả nội dung hiển thị thành phần điều khiển trong một phần tử <div> để có thể thao tác với thành phần điều khiển 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 hiển thị bên dưới.

Để thiết kế các thành phần điều khiển hấp dẫn, bạn cần có một số kiến thức về CSS và cấu trúc DOM. Mã sau đây cho thấy một hàm để tạo phần tử nút xoay bản đồ để căn giữa 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;
}

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

Để có thể hữu ích, thành phần điều khiển phải thực sự làm được việc gì đó. Bạn có thể tuỳ ý quyết định chức năng của nút điều khiển. Thành phần điều khiển 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 dữ liệu đầu vào của người dùng, hãy sử dụng addEventListener(). Phương thức này xử lý các sự kiện DOM được hỗ trợ. Đoạn mã sau đây thêm 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ăng khả năng tiếp cận cho các chế độ điều khiển tuỳ chỉnh

Để đảm bảo các thành phần điều khiển nhận được sự kiện bàn phím và xuất hiện chính xác cho trình đọc màn hình:

  • 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 để lưu giữ các thành phần điều khiển 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.
  • Sử dụng phần tử label, thuộc tính title hoặc thuộc tính aria-label khi thích hợp để cung cấp thông tin về một thành phần trên giao diện người dùng.

Định vị các chế độ điều khiển tuỳ chỉnh

Bạn có thể đặt các chế độ điều khiển tuỳ chỉnh trên bản đồ bằng cách đặt các chế độ đó ở vị trí thích hợp trong thuộc tính controls của đối tượng Map. Thuộc tính này chứa một mảng google.maps.ControlPosition. Bạn thêm một thành phần điều khiển tuỳ chỉnh vào bản đồ bằng cách thêm Node (thường là <div>) vào một ControlPosition thích hợp. (Để biết thông tin về các vị trí này, hãy xem phần Điều khiển vị trí ở trên.)

Mỗi ControlPosition lưu trữ một MVCArray của các thành phần đ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.

API đặt các thành phần điều khiển ở mỗi vị trí theo thứ tự của thuộc tính index; các thành phần điều khiển có chỉ mục thấp hơn sẽ được đặt trước. Ví dụ: hai thành phần điều khiển tuỳ chỉnh ở vị trí BOTTOM_RIGHT sẽ được bố trí theo thứ tự chỉ mục này, trong đó các giá trị chỉ mục thấp hơn sẽ được ưu tiên. Theo mặc định, tất cả các chế độ điều khiển tuỳ chỉnh được đặt sau khi đặt bất kỳ chế độ điều khiển mặc định nào của API. Bạn có thể ghi đè hành vi này bằng cách đặt thuộc tính index của thành phần điều khiển thành một giá trị âm. Bạn không được đặt các chế độ điều khiển tuỳ chỉnh bên trái biểu trưng hoặc bên phải thông tin bản quyền.

Mã sau đây tạo một thành phần điều khiển tuỳ chỉnh mới (không hiển thị hàm khởi tạo) và thêm thành phần điều khiển đó vào bản đồ ở vị trí TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// 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);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

Ví dụ về thành phần điều khiển 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 hiển thị ở trên. Thành phần điều khiển này phản hồi các sự kiện 'click' của DOM bằng cách căn giữa bản đồ 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

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
Xem ví dụ

Thử mẫu

Thêm trạng thái vào các thành phần đ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 tương tự như ví dụ trước, nhưng thành phần điều khiển chứa thêm một nút "Set Home" (Đặt nhà) để đặt thành phần điều khiển hiển thị vị trí nhà mới. Chúng ta thực hiện việc này bằng cách tạo một thuộc tính home_ trong thành phần điều khiể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

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
Xem ví dụ

Thử mẫu