Điều khiển

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

Bản đồ hiển thị thông qua Maps JavaScript API 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 đồ. Các phần tử này được gọi là thành phần điều khiển và bạn có thể đưa các biến thể của các thành phần đ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ì và để Maps JavaScript API xử lý tất cả hành vi điều khiển.

Bản đồ sau đây cho thấy nhóm chế độ điều khiển mặc định mà API JavaScript của Maps hiển thị:

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

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

• Bộ điều khiển Loại bản đồ có sẵn ở dạng thanh nút thả xuống hoặc thanh nút ngang, cho phép người dùng chọn một loại bản đồ (ROADMAP, SATELLITE, HYBRID hoặc TERRAIN). Theo mặc định, bộ điều khiển này xuất hiện ở góc trên cùng bên trái của bản đồ.
• Chế độ điều khiển toàn màn hình 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 không xuất hiện trên thiết bị iOS.
• Camera control (Điều khiển máy ảnh) có cả chế độ điều khiển thu phóng và xoay.
• Chế độ điều khiển 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ố. Theo mặc định, nút điều khiển này 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 3D. Theo mặc định, nút điều khiển này xuất hiện ở gần dưới cùng bên phải của bản đồ. Hãy xem bài viết Tổng quan về 3D để biết thêm thông tin.
• Thành phần điều khiển tỷ lệ hiển thị một thành phần tỷ lệ bản đồ. Chế độ kiểm soát này bị tắt theo mặc định.
• Chế độ điều khiển phím tắt hiển thị danh sách phím tắt để tương tác với bản đồ.

Bạn không truy cập hoặc sửa đổi trực tiếp các chế độ điều khiển bản đồ này. Thay vào đó, bạn sửa đổi các trường MapOptions của bản đồ, điều 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 chế độ đ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 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ế độ điều khiển thành hiển thị. Hãy xem phần Thêm các thành phần đ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 là 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. Để làm như vậy, hãy đặt thuộc tính disableDefaultUI của bản đồ (trong đối tượng MapOptions) thành true. Thuộc tính này tắt mọi thành phần điều khiển trên giao diện người dùng của API JavaScript của Maps. Tuy nhiên, chế độ này không ảnh hưởng đến cử chỉ chuột hoặc phím tắt trên bản đồ cơ sở, vốn được kiểm soát tương ứng bằng các thuộc tính gestureHandling và keyboardShortcuts.

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

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

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

Thêm các thành phần điều khiển vào bản đồ

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

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 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 các trường này thành true để hiển thị hoặc đặt thành false để ẩn:

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

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

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

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

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

Lựa chọn kiểm soát

Bạn có thể định cấu hình một số chế độ điều khiển, cho phép bạ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 options (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ế độ điều khiển Loại bản đồ được chỉ định trong trường mapTypeControlOptions. Chế độ đ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 các nút điều khiển dưới dạng các nút trên một thanh ngang như trong Google Maps.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU hiển thị một nút điều khiển duy nhất cho phép bạn chọn loại bản đồ bằng trình đơn thả xuống.
• google.maps.MapTypeControlStyle.DEFAULT cho thấy hành vi mặc định, tuỳ thuộc vào kích thước màn hình và có thể thay đổi trong các phiên bản API sau này.

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 chế độ điều khiển 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 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 mặc định của các chế độ điều khiển.

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

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

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ế độ kiểm soát

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ị bên dưới:

• cameraControl bật/tắt chế độ điều khiển camera cho phép người dùng thu phóng và kéo bản đồ. Theo mặc định, chế độ điều khiển này hiển thị trên tất cả bản đồ. Trường cameraControlOptions cũng chỉ định CameraControlOptions để sử dụng cho chế độ đ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à 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 của bản đồ. Trường mapTypeControlOptions cũng chỉ định MapTypeControlOptions để sử dụng cho chế độ đ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 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 cũng chỉ định StreetViewControlOptions để sử dụng cho chế độ điều khiển này.
• rotateControl bật/tắt sự xuất hiện của một Chế độ điều khiển xoay để điều khiển hướng của hình ảnh 3D. 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 3D cho loại bản đồ đã cho ở mức thu phóng và vị trí hiện tại. Bạn có thể thay đổi hành vi của chế độ điều khiển bằng cách đặt rotateControlOptions của bản đồ để chỉ định RotateControlOptions cần sử dụng. Chế độ điều khiển này sẽ chỉ xuất hiện trên bản đồ cơ sở 3D.
• 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, nút này sẽ luôn xuất hiện ở góc dưới cùng bên phải của bản đồ. scaleControlOptions cũng chỉ định ScaleControlOptions để sử dụng cho chế độ đ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, nút đ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 đồ. fullscreenControlOptions cũng chỉ định FullscreenControlOptions để sử dụng cho chế độ điều khiển này.

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

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

Hầu hết các tuỳ chọn điều khiển đều chứa thuộc tính position (thuộc loại ControlPosition) cho biết vị trí đặt tuỳ chọn điều khiển trên bản đồ. Vị trí của các chế độ điều khiển này không cố định. 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 sắp xếp chúng xung quanh các phần tử bản đồ hiện có hoặc các chế độ đ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 đồ).

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

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

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

Xin lưu ý rằng các vị trí này có thể trùng với vị trí của các phần tử trên giao diện người dùng mà bạn không thể sửa đổi vị trí (chẳng hạn như bản quyền và biểu trưng Google). Trong những trường hợp đó, các nút đ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í được chỉ định. Không có gì đảm bảo rằng các chế độ điều khiển sẽ không chồng chéo lên nhau trong các bố cục phức tạp, mặc dù API sẽ cố gắng sắp xếp chúng một cách thông minh.

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

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.ts

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.js

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ó 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 nút điều khiển là các tiện ích cố định, nổi trên 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 đồ bên dưới. Về cơ bản, một 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 trình xử lý sự kiện.

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

• 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> để giữ chế độ điều khiển và thêm phần tử này vào thuộc tính controls của Map.

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

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

Cách bạn vẽ thành phần điều khiển là tuỳ thuộc vào bạn. Nhìn chung, bạn nên đặt tất cả nội dung trình bày của thành phần điều khiển trong một phần tử <div> duy nhất để 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 dưới đây.

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

CSS khai báo

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

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

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

HTML khai báo

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

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

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

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

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

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

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

JavaScript có lập trình

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

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

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

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

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

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

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

Để một thành phần điều khiển trở nên hữu ích, thành phần đó phải thực sự làm được điều gì đó. Chức năng của thành phần điều khiển là do bạn quyết định. 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 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. 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 hỗ trợ tiếp cận cho các chế độ điều khiển tuỳ chỉnh

Để đảm bảo rằng 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 với trình đọc màn hình, hãy làm như sau:

• Luôn sử dụng các phần tử HTML gốc cho nút, phần tử biểu mẫu và nhãn. Chỉ sử dụng phần tử DIV làm vùng chứa để 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 phần tử trên giao diện người dùng.

Đặt vị trí cho các chế độ điều khiển tuỳ chỉnh

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

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

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

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

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

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

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

Để đặt vị trí cho một chế độ điều khiển tuỳ chỉnh theo cách khai báo, hãy đặt thuộc tính slot trong HTML:

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

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

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

// Get the gmp-map element
const mapElement = document.querySelector('gmp-map')!;

async function init() {
    (await google.maps.importLibrary('maps')) as typeof google.maps;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the button element from the HTML
    const centerButton = document.getElementById(
        'btnCenterMap'
    ) as HTMLButtonElement;
    // Move the event listener here
    centerButton.addEventListener('click', () => {
        innerMap.setCenter(chicago);
    });
}

void init();
index.ts

const chicago = { lat: 41.85, lng: -87.65 };
// Get the gmp-map element
const mapElement = document.querySelector('gmp-map');
async function init() {
    (await google.maps.importLibrary('maps'));
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    // Get the button element from the HTML
    const centerButton = document.getElementById('btnCenterMap');
    // Move the event listener here
    centerButton.addEventListener('click', () => {
        innerMap.setCenter(chicago);
    });
}
void init();
index.js

Thêm trạng thái vào 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 đây tương tự như ví dụ trước, nhưng thành phần điều khiển có thêm nút "Set Home" (Đặt nhà riêng) để đặt thành phần điều khiển hiển thị vị trí nhà riêng 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, đồng thời cung cấp phương thức getter và setter cho trạng thái đó.

let innerMap: google.maps.Map;
const mapElement = document.querySelector('gmp-map')!;

let center: google.maps.LatLngLiteral | google.maps.LatLng = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById(
        'btnCenterMap'
    ) as HTMLInputElement;
    const setCenterButton = document.getElementById(
        'btnSetCenter'
    ) as HTMLInputElement;

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

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

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.ts

let innerMap;
const mapElement = document.querySelector('gmp-map');

let center = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById('btnCenterMap');
    const setCenterButton = document.getElementById('btnSetCenter');

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

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

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.js