Các chế độ kiểm soát

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

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

Các bản đồ được hiển thị thông qua API JavaScript của Maps chứa các phần tử trên giao diện người dùng để cho phép người dùng tương tác với bản đồ. Những phần tử này được gọi là chế độ điều khiển và bạn có thể đưa 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 không cần làm gì cả và để API JavaScript của Maps xử lý mọi hành vi kiểm soát.

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

Dưới đây là danh sách tập hợp đầy đủ các chức năng kiểm soát mà bạn có thể sử dụng trong bản đồ của mình:

  • Đ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, chế độ đ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 đồ.
  • Điều khiển Loại bản đồ có sẵn trong kiểu thanh nút thả xuống hoặc ngang, cho phép người dùng chọn loại bản đồ (ROADMAP, SATELLITE, HYBRID hoặc TERRAIN). Điều khiển 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ế độ kiểm soát 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 Người hình mắc áo lên 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 phía dưới cùng bên phải của bản đồ.
  • Điều khiển xoay cung cấp kế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, chế độ điều khiển này sẽ xuất hiện ở gần phía dưới cùng bên phải của bản đồ. Xem hình ảnh 45° để biết thêm thông tin.
  • Điều khiển tỷ lệ hiển thị phần tử tỷ lệ bản đồ. Chế độ điều khiển này bị tắt theo mặc định.
  • Chế độ kiểm soát 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.
  • Phím tắt kiểm soá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ế độ kiểm soát này trên bản đồ. Thay vào đó, bạn 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 thực thể cho 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 đồ.

Không phải tất cả các chế độ kiểm soát này đều được bật theo mặc định. Để 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 nút đ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 thiết lập rõ ràng chế độ kiểm soát này ở chế độ hiển thị. Hãy 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ế độ điều khiển là như nhau trên thiết bị di động và máy tính, ngoại trừ chế độ điều khiển toàn màn hình (xem hành vi được mô tả trong danh sách các chế độ điều khiển).

Ngoài ra, tính năng xử lý bàn phím luôn bật theo mặc định trên mọi 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. Tài sản này vô hiệu hoá mọi nút điều khiển giao diện người dùng từ API Maps JavaScript. Tuy nhiên, tuỳ chọn này không ảnh hưởng đến các cử chỉ dùng 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 vô hiệu hoá các nút 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ử dùng mẫu

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

Bạn nên điều chỉnh giao diện của mình bằng cách xoá, thêm hoặc sửa đổi hành vi hoặc chế độ điều khiể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 này được thêm rõ ràng vào ứng dụng của mình.

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ố khác sẽ không xuất hiện trừ phi bạn yêu cầu cụ thể. Thao tác thêm hoặc xoá chế độ đ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 thành true để hiển thị các trường đó hoặc đặt thành false để ẩn các trường đó:

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

Theo mặc định, tất cả các nút điều khiển sẽ biến mất nếu bản đồ nhỏ hơn 200x200px. Bạn có thể ghi đè hành vi này bằng cách thiết lập rõ ràng chế độ kiểm soát này ở chế độ hiển thị. Ví dụ: bảng sau đây cho biết 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 Hiển thị?
Bất kỳ false Không
Bất kỳ true Có
>= 200 x 200 pixel undefined Có
< 200x200px undefined Không

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

Tùy chọn điều khiển

Một số chế độ điều khiển có thể định cấu hình, cho phép bạn thay đổi hành vi hoặc giao diện của các thành phần điều khiển đó. Ví dụ: mục kiểm soát Loại bản đồ có thể xuất hiện dưới dạng một 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 chế độ kiểm soát Loại bản đồ được biểu thị trong trường mapTypeControlOptions. Thành phần điều khiển Loại bản đồ có thể xuất hiện một trong các tuỳ chọn style sau:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR hiển thị mảng điều khiển dưới dạng các nút trong thanh ngang như hiển thị trên Google Maps.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU cho thấy một nút điều khiển duy nhất cho phép bạn chọn loại bản đồ thông qua 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 thực sự sửa đổi bất kỳ tuỳ chọn điều khiển 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ế độ điều khiển 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 đ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ử dùng mẫu

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

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

Bạn chỉ định cách trình bày một chế độ đ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 đồ. Những trường này được trình bày như sau:

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

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 tắt ban đầu.

Định vị Kiểm soát

Hầu hết các tuỳ chọn điều khiển đều chứa thuộc tính position (loại ControlPosition). Thuộc tính này cho biết vị trí cần đặt chế độ điều khiển trên bản đồ. Vị trí của các chế độ kiểm soát này là không tuyệt đối. Thay vào đó, API sẽ bố trí các chế độ điều khiển một cách thông minh bằng cách phân luồng các chế độ điều khiển đó xung quanh thành phần bản đồ hiện có hoặc các chế độ điều khiển khác trong phạm vi các điều kiện ràng buộc 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 chế độ điều khiển có thể không chồng chéo với bố cục phức tạp, mặc dù API sẽ cố gắng sắp xếp các chế độ đó một cách thông minh.

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

  • TOP_CENTER cho biết rằng chế độ điều khiển nên được đặt dọc theo phần giữa trên cùng của bản đồ.
  • TOP_LEFT cho biết rằng chế độ điều khiển nên được đặt dọc theo phía trên cùng bên trái của bản đồ, với mọi phần tử phụ của chế độ điều khiển "flow" về phía trên cùng chính giữa.
  • TOP_RIGHT cho biết rằng chế độ điều khiển nên được đặt dọc theo phía trên cùng bên phải của bản đồ, với mọi phần tử phụ của chế độ điều khiển "flow" về phía trên cùng bên phải.
  • LEFT_TOP cho biết rằng chế độ điều khiển nên được đặt dọc theo phía 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 rằng chế độ điều khiển nên được đặt dọc theo phía 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 rằng thành phần điều khiển nên được đặt dọc theo phía bên trái của bản đồ, ở giữa vị trí TOP_LEFT và BOTTOM_LEFT.
  • RIGHT_CENTER cho biết rằng thành phần điều khiển nên được đặt dọc theo phía bên phải của bản đồ, ở giữa vị trí TOP_RIGHT và BOTTOM_RIGHT.
  • LEFT_BOTTOM cho biết rằng thành phần điều khiển nên được đặt dọc theo 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 rằng chế độ điều khiển này phải được đặt dọc theo phía 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 rằng chế độ điều khiển nên được đặt dọc theo phần giữa phía dưới cùng của bản đồ.
  • BOTTOM_LEFT cho biết rằng chế độ điều khiển nên được đặt 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 chế độ điều khiển "di chuyển" về phía dưới cùng chính giữa.
  • BOTTOM_RIGHT cho biết rằng chế độ điều khiển nên được đặt dọc theo phía dưới cùng bên phải của bản đồ, với mọi phần tử phụ của chế độ điều khiển "di chuyển" về phía dưới cùng chính giữa.

Xin lưu ý rằng những vị trí này có thể trùng với vị trí của các thành phần trê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 của Google). Trong những trường hợp đó, các thành phần điều khiển sẽ di chuyể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í đã chỉ định.

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

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ử dùng mẫu

Điều khiển 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. Phần điều khiển là các tiện ích cố định nổi ở vị trí tuyệt đối trên đầu bản đồ, trái ngược với lớp phủ di chuyển cùng với bản đồ bên dưới. 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 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 có một vài quy tắc. Tuy nhiên, các nguyên tắc sau đây có thể là phương pháp hay nhất:

  • Xác định CSS thích hợp để(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 hoặc sự kiện của người dùng (ví dụ: các 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.

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

Các thành phần điều khiển tuỳ chỉnh của bản vẽ

Việc bạn vẽ quyền kiểm soát như thế nào là do bạn quyết định. Thông thường, bạn nên đặt mọi bản trình bày điều khiển trong một phần tử <div> duy nhất để có thể thao tác với chế độ điều khiển dưới dạng một đơn vị duy nhất. Chúng ta sẽ dùng mẫu thiết kế này trong các mẫu dưới đây.

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

Để một chế độ điều khiển trở nên hữu ích, chức năng điều khiển đó phải thực sự làm một điều gì đó. Bạn có toàn quyền kiểm soát. Chế độ điều khiển này có thể phản hồi hoạt động đầu vào của người dùng hoặc có thể phản hồi các thay đổi về trạng thái của Map.

Để phản hồi hoạt động đầu vào của người dùng, hãy sử dụng addEventListener() để 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. Lưu ý rằng sự kiện này nhận được từ DOM, 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);
});

Làm cho các chế độ điều khiển tuỳ chỉnh trở nên dễ tiếp cận

Để đảm bảo rằng các chế độ điều khiển nhận sự kiện bàn phím và hiển thị chính xác với trình đọc màn hình:

  • Luôn sử dụng phần tử HTML gốc cho các 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ế độ điều khiển gốc; tuyệt đối không sử dụng lại DIV làm phần tử trên 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 phần tử trên giao diện người dùng.

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

Các thành phần điều khiển tuỳ chỉnh được định vị trên bản đồ bằng cách đặt các thành phần đó tại những 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 có thể 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 Kiểm soát 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ế độ kiểm soát được thêm hoặc bị xoá khỏi vị trí, API sẽ cập nhật các chế độ kiểm soát tương ứng.

API này đặt các thành phần điều khiển ở từng 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, mọi chế độ điều khiển tuỳ chỉnh sẽ được đặt sau các chế độ điều khiển mặc định 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 một chế độ điều khiển thành giá trị âm. Không được đặt các nút điều khiển tuỳ chỉnh ở bên trái hoặc bên phải biểu trưng bản quyền.

Mã sau đây sẽ tạo một thành phần điều khiển tuỳ chỉnh mới (hàm khởi tạo của thành phần này không xuất hiện) và thêm thành phần điều khiển này 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

Chế độ đ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 nêu trên. Chế độ điều khiển này phản hồi các sự kiện DOM 'click' 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ử dùng mẫu

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

Các chế độ đ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 chế độ điều khiển này có thêm một nút "Set Home" (Đặt màn hình chính) để thiết lập chế độ đ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 chế độ điều khiển để lưu trữ trạng thái này, đồng thời 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ử dùng mẫu