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 Maps JavaScript chứa 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à kiểm soát và bạn có thể đưa biến thể của các chế độ kiểm soát này vào . Ngoài ra, bạn không cần làm gì cả và để API Maps JavaScript xử lý tất cả hành vi kiểm soát.

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

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 sẽ hiển thị dấu "+" và "-" các nút để thay đổi mức thu phóng của bản đồ. Điều khiển này xuất hiện theo mặc định trong góc dưới cùng bên phải của bản đồ.
  • Tính năng Camera control (Điều khiển máy ảnh) có cả tính năng thu phóng và điều khiển xoay và được hiển thị theo mặc định thay cho điều khiển thu phóng khi sử dụng kênh thử nghiệm beta.
  • Kiểm soát loại bản đồ có sẵn trong trình đơn thả xuống hoặc kiểu thanh nút nằm 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 sẽ xuất hiện ở phía trên cùng bên trái góc bản đồ.
  • Chế độ kiểm soát Chế độ xem đường phố chứa biểu tượng Người hình mắc áo có thể kéo vào bản đồ để bật Chế độ xem đường phố. Chế độ kiểm soát này sẽ xuất hiện theo mặc định ở gần phía dưới cùng bên phải của bản đồ.
  • Kiểm soát xoay cung cấp kết hợp tuỳ chọn nghiêng và xoay cho bản đồ chứa hình ảnh xiên. Chiến dịch này kiểm soát sẽ xuất hiện theo mặc định ở gần phía dưới cùng bên phải của bản đồ. Xem 45° hình ảnh để 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.
  • Tính năng 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 sẽ 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 không hiển thị trên thiết bị iOS.
  • Mục Kiểm soát 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ế độ 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 đồ ảnh hưởng đến mức độ 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 chế độ điều khiển bản trình bày tạo thực thể bản đồ của bạn (với MapOptions thích hợp) hoặc sửa đổi ánh xạ một cách linh động bằng cách gọi setOptions() để thay đổi .

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ề giao diện người dùng mặc định (và cách sửa đổi hành vi đó), hãy xem 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 là hiển thị. Xem phần Thêm tùy chọn kiểm soát vào Bản đồ.

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

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. Để làm như vậy, đặt thuộc tính disableDefaultUI của bản đồ (trong phần tử MapOptions) thành true. Cơ sở lưu trú 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. Nó tuy nhiên, không ảnh hưởng đến các cử chỉ bằng chuột hoặc phím tắt trên chân đế bản đồ do gestureHandling kiểm soát và keyboardShortcuts thuộc tính 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 giao diện người dùng hành vi hoặc các biện pháp kiểm soát và đảm bảo rằng các bản cập nhật trong tương lai không làm thay đổi điều này hành vi. Nếu chỉ muốn thêm hoặc sửa đổi hành vi hiện có, bạn cần phải hãy đảm bảo rằng bạn đã thêm chức năng kiểm soát này vào ứng dụng của mình 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 các chế độ điều khiển khác sẽ không xuất hiện trừ khi bạn yêu cầu cụ thể. Thêm hoặc xoá chế độ điều khiển khỏi ánh xạ được chỉ định trong đối tượng MapOptions sau mà bạn đặt thành true để hiển thị hoặc đặt các trường đó false để ẩn chúng:

{
  zoomControl: boolean,
  cameraControl: 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 đặt rõ ràng chế độ kiểm soát là hiển thị. Ví dụ: bảng sau đây cho biết liệu chế độ điều khiển thu phóng đang có thể nhìn thấy hay không, tuỳ thuộc vào kích thước bản đồ và 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ó
< 200 x 200 pixel undefined Không

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

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 thay đổi giao diện của chúng. Kiểm soát Loại bản đồ, đối với ví dụ: có thể xuất hiện dưới dạng thanh ngang hoặc trình đơn thả xuống.

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

Ví dụ: tuỳ chọn để thay đổi điều khiển 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 trong 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 Bản đồ.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU hiển thị một điều khiển bằng một nút cho phép bạn chọn loại bản đồ bằng cách sử dụng một trình đơn thả xuống .
  • google.maps.MapTypeControlStyle.DEFAULT hiển thị chế độ mặc định, tuỳ thuộc vào kích thước màn hình và có thể thay đổi trong tương lai các phiên bản của API đó.

Lưu ý rằng nếu bạn sửa đổi bất kỳ tuỳ chọn kiểm soát nào, bạn phải bật rõ ràng kiểm soát bằng cách đặt giá trị MapOptions thích hợp đến true. Ví dụ: để đặt điều khiển Loại bản đồ để biểu 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í mặc định và kiểu điều khiển.

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, chuyển 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 nút điều khiển khi tạo bản đồ của mình thông qua các trường trong đối tượng MapOptions của bản đồ. Các các trường được trình bày như dưới đây:

  • zoomControl bật/tắt chế độ kiểm soát Zoom. Theo mặc định, nút đ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 đồ. Chiến lược phát hành đĩa đơn Trường zoomControlOptions chỉ định thêm ZoomControlOptions để sử dụng cho chế độ kiểm soát này.
  • cameraControl bật/tắt chế độ điều khiển camera. Điều khiển này hiển thị theo mặc định trên bản đồ bằng cách sử dụng kênh thử nghiệm beta. Trường cameraControlOptions chỉ định thêm CameraControlOptions để 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 hiển thị và xuất hiện ở góc trên cùng bên trái góc bản đồ. Trường mapTypeControlOptions 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 hiển thị và xuất hiện gần phía dưới cùng bên phải của bản đồ. Trường streetViewControlOptions 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 Xoay nút điều khiển để kiểm soát hướng hình ảnh 45°. Theo mặc định, sự hiện diện của chế độ kiểm soát sẽ được xác định theo sự hiện diện hay vắng mặt của hình ảnh 45° cho loại bản đồ cho trước ở mức thu phóng hiện tại và vị trí. Bạn có thể thay đổi hoạt động của nút điều khiển bằng cách đặt rotateControlOptions để chỉ định RotateControlOptions để sử dụng. Bạn không thể làm cho điều khiển xuất hiệ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 xuất hiện. Thời gian bật, nó sẽ luôn xuất hiện ở góc dưới cùng bên phải của bản đồ. Chiến lược phát hành đĩa đơ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ở ra 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ế độ 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 đồ. Chiến lược phát hành đĩa đơ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 chế độ điều khiển đều chứa tài sản position (loại ControlPosition) cho biết vị trí trên bản đồ đặt chế độ điều khiể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 chúng qua lại các thành phần bản đồ hiện có, hoặc các chế độ kiểm soát khác, trong phạm vi những ràng buộc nhất định (chẳng hạn như kích thước bản đồ).

Lưu ý: Chúng tôi không thể đảm bảo rằng các điều khiển có thể không chồng chéo với nhau vì bố cục phức tạp, mặc dù API sẽ sắp xếp chúng một cách thông minh.

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

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

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

Ví dụ sau đây trình bày một bản đồ đơn giản với tất cả các nút điều khiển được bật, trong 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

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

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

Để 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ý 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 trên bản đồ hoặc sự kiện của người dùng (ví dụ: 'click' sự kiện).
  • Tạo một phần tử <div> để giữ chế độ điều khiển và thêm phần tử này với 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 tất cả bản trình bày có quyền kiểm soát vào một nơi duy nhất Phần tử <div> để bạn có thể thao tác với chế độ điều khiển như một đơn vị. 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 biện pháp kiểm soát hấp dẫn, bạn cần có một số kiến thức về CSS và DOM cấu trúc. Đoạn mã sau đây cho thấy hàm tạo một phần tử nút xoay bản đồ để lấy trọng tâm ở 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ì đó. Quyền kiểm soát làm tuỳ thuộc vào bạn. Bộ điều khiển này có thể phản hồi với hoạt động đầu vào của người dùng hoặc có thể phản hồi cho những 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ợ. Chiến lược phát hành đĩa đơn đoạn mã sau đây thêm một trình nghe cho 'click' của trình duyệt sự kiện. 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 DIV làm phần tử vùng chứa để lưu giữ các chế độ kiểm soát gốc; không bao giờ sử dụng lại DIV làm giao diện người dùng tương tác .
  • Dùng phần tử label, thuộc tính title hoặc 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 điều khiển tuỳ chỉnh được định vị trên bản đồ bằng cách đặt chúng tại những vị trí thích hợp vị trí trong controls của đối tượng Map thuộc tính này. Thuộc tính này chứa một mảng google.maps.ControlPosition giây. Bạn thêm điều khiển tùy chỉnh vào ánh xạ bằng cách thêm Node (thường là <div>) thành một ControlPosition thích hợp. (Để biết thêm thông tin về vị trí, hãy xem Định vị Kiểm soát above.)

Mỗi ControlPosition lưu trữ một MVCArray của điều khiển được hiển thị ở vị trí đó. Do đó, khi các chế độ kiểm soát được thêm vào hoặc bị xoá khỏi vị trí, thì API sẽ cập nhật các biện pháp kiểm soát tương ứng.

API đặt các chế độ điều khiển ở mỗi vị trí theo thứ tự của một Thuộc tính index; những đ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 tại vị trí BOTTOM_RIGHT sẽ được sắp xếp theo thứ tự trong chỉ mục này, với các giá trị chỉ mục thấp hơn bao gồm quyền ưu tiên. Theo mặc định, tất cả các nút điều khiển tuỳ chỉnh được đặt sau vị trí đặt quảng cáo bất kỳ tuỳ chọn kiểm soát mặc định nào đối với API. Bạn có thể ghi đè hành vi này bằng cách đặt một thuộc tính index của điều khiển thành giá trị âm. Chế độ điều khiển tuỳ chỉnh không thể được đặt ở bên trái hoặc bên phải biểu trưng bản quyền.

Mã sau đây tạo ra 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 điều khiển này không hiển thị) và thêm 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

Bước kiểm soát 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 với DOM 'click' sự kiện bằng cách căn giữa bản đồ theo một mặc định nhất định vị trí:

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 cũng tương tự như hiển thị trước đó, nhưng chế độ điều khiển này có thêm một mục "Đặt địa chỉ nhà riêng" nút đặt điều khiển để hiển thị vị trí nhà mới. Chúng tôi thực hiện điều đó bằng cách tạo một home_ thuộc tính trong nhóm đối chứng để 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ử dùng mẫu