Tổng quan về các chế độ kiểm soát
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 đồ. Các thành phần này được gọi là chế độ điều khiển và bạn có thể thêm nhiều 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 cần làm gì và để API JavaScript của Maps xử lý tất cả hành vi kiểm soát.
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 toàn bộ các chế độ điều khiển 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 đồ. Chế độ điều khiển này xuất hiện theo mặc định ở góc dưới cùng bên phải của bản đồ.
- Chế độ kiểm soát 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 một loại bản đồ (
ROADMAP
,SATELLITE
,HYBRID
hoặcTERRAIN
). Chế độ đ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 đồ. - 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ế độ điều khiển này 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 các tuỳ chọn nghiêng và xoay cho bản đồ chứa hình ảnh xiên. Chế độ điều khiển này 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 hình ảnh 45° để biết thêm thông tin.
- Điều khiển tỷ lệ hiển thị một 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 cung cấp tuỳ chọn mở bản đồ ở chế độ toàn màn hình. Chế độ điều khiển 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ế độ kiểm soát toàn màn hình không hiển thị trên thiết bị iOS.
- Đ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 sẽ ảnh hưởng đến chế độ hiển thị và bản trình bày các chế độ điều khiển. Bạn có thể điều chỉnh bản trình bày điều khiển khi tạo bản sao bản đồ (bằng MapOptions
thích hợp) hoặc sửa đổi bản đồ một cách linh hoạt bằng cách gọi setOptions()
để thay đổi các 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 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ế độ điều khiển để sử dụng. Hãy xem phần Thêm các chế độ điều khiển vào bản đồ.
Hành vi và hình thức của các nút đ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 chế độ điều khiển).
Ngoài ra, tính năng xử lý bằng bàn phím được 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 trên 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 Maps JavaScript API. Tuy nhiên, tính năng này không ảnh hưởng đến các cử chỉ với chuột hoặc phím tắt trên bản đồ cơ sở (được kiểm soát tương ứng bằng các thuộc tính gestureHandling
và keyboardShortcuts
).
Mã sau đây 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;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, disableDefaultUI: true, }); } window.initMap = initMap;
Thử mẫu
Thêm các 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 các chế độ đ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 quyền kiểm soát đượ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 các chế độ khác sẽ không xuất hiện
trừ phi bạn yêu cầu các chế độ đó một cách 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 có thể thiết lập các trường này thành true
để cho thấy các đối tượ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ế độ điều khiển để sử dụ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 |
Hiển thị? |
---|---|---|
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 thành phầ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, những nội dung sửa đổi này sẽ bổ sung cho 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;
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;
Thử mẫu
Tuỳ 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 các chế độ đó. Ví dụ: Kiểm soát loại bản đồ 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 trường tuỳ chọn điều khiển phù hợp trong đối tượng MapOptions
khi tạo bản đồ.
Ví dụ: các lựa chọn để thay đổi chế độ điều khiển Loại bản đồ được 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
cho thấy một loạt các chế độ đ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
hiển thị một nút điều khiển duy nhất để bạn chọn loại bản đồ thông qua trình đơn thả xuống.google.maps.MapTypeControlStyle.DEFAULT
hiển thị hành vi mặc định, phụ 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 một thành phần đ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;
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;
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ể 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 các chế độ điều khiển
Bạn sẽ chỉ định cách trình bày của 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 đồ. 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, chế độ điều khiển này sẽ 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ườngzoomControlOptions
chỉ định thêmZoomControlOptions
để sử dụng cho chế độ điều khiển 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ườngmapTypeControlOptions
chỉ định thêmMapTypeControlOptions
để sử dụng cho chế độ điều khiển 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 của Chế độ xem đường phố. Theo mặc định, chế độ điều khiển này sẽ 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ườngstreetViewControlOptions
chỉ định thêmStreetViewControlOptions
để sử dụng cho chế độ điều khiển này.rotateControl
bật/tắt sự xuất hiện của nút đ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 đượ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 tại vị trí và mức thu phóng hiện tại. Bạn có thể thay đổi hành vi của chế độ điều khiển bằng cách đặtrotateControlOptions
của bản đồ để chỉ địnhRotateControlOptions
sử dụng. Bạn không thể làm cho chế độ điều khiển xuất hiện nếu hiện không có hình ảnh 45°.scaleControl
bật/tắt tính năng điều khiển Tỷ lệ cung cấp tỷ lệ bản đồ đơn giản. Theo mặc định, chế độ điều khiển này sẽ không hiển thị. Khi được bật, địa điểm 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
chỉ định thêmScaleControlOptions
để sử dụng cho chế độ điều khiển này.fullscreenControl
bật/tắt chế độ kiểm soát mở bản đồ ở chế độ toàn màn hình. Theo mặc định, chế độ điều khiển này được bật trên máy tính và thiết bị Android. Khi được bậ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 đồ. Ngoài ra,fullscreenControlOptions
chỉ định thêmFullscreenControlOptions
để sử dụng cho chế độ điều khiển này.
Lưu ý rằng bạn có thể chỉ định các tuỳ chọn cho những chế độ kiểm soát mà bạn tắt lúc ban đầu.
Vị trí đ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
). 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 thành phần điều khiển này 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 di chuyển chúng xung quanh các thành phần bản đồ hiện có hoặc các chế độ điều khiển khác trong những điều kiện 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 đảm bảo rằng các chế độ kiểm soát có thể không trùng lặp với những bố cục phức tạp, mặc dù API sẽ cố gắng sắp xếp những chế độ này một cách thông minh.
Các vị trí điều khiển sau được hỗ trợ:
TOP_CENTER
cho biết chế độ điều khiển phải được đặt dọc theo phần chính 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 sẽ "chảy" 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 sẽ "hiển thị" về phía trên cùng chính giữa.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 bất kỳ phần tửTOP_LEFT
nào.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 bất kỳ phần tửTOP_RIGHT
nào.LEFT_CENTER
cho biết rằng chế độ đ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 chế độ điều khiển nên được đặt dọc theo phía bên phải của bản đồ, chính giữa ở giữa vị tríTOP_RIGHT
vàBOTTOM_RIGHT
.LEFT_BOTTOM
cho biết rằng bạn nên đặt chế độ điều khiển nằm ở dưới cùng bên trái của bản đồ, nhưng phía trên bất kỳ phần tửBOTTOM_LEFT
nào.RIGHT_BOTTOM
cho biết rằng bạn nên đặt chế độ điều khiển ở góc dưới cùng bên phải của bản đồ, nhưng phía trên bất kỳ phần tửBOTTOM_RIGHT
nào.BOTTOM_CENTER
cho biết chế độ điều khiển phải được đặt dọc theo chính giữa dưới cùng của bản đồ.BOTTOM_LEFT
cho biết nê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 mọi phần tử phụ của chế độ điều khiển sẽ "chảy" về phía chính giữa dưới cùng.BOTTOM_RIGHT
cho biết nê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 mọi phần tử phụ của chế độ điều khiển sẽ "chảy" về phía chính 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 trên giao diện người dùng mà bạn không thể 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 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 càng gần với vị trí được chỉ định càng tốt.
Ví dụ sau đây cho thấy một bản đồ đơn giản, trong đó tất cả các chế độ điều khiển đều được bật, ở các vị trí khác nhau.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 12, center: { lat: -28.643387, lng: 153.612224 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER, }, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER, }, scaleControl: true, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP, }, fullscreenControl: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
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;
Thử mẫu
Các chế độ đ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ế độ đ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 bản đồ cơ bản. Về cơ bản, chế độ đ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 sử dụng một số quy tắc. Tuy nhiên, các nguyên tắc sau có thể là 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ụ: 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ínhcontrols
củaMap
.
Mỗi mối lo ngại này được thảo luận dưới đây.
Vẽ các nút điều khiển tuỳ chỉnh
Bạn nắm quyền kiểm soát như thế nào. Nói chung, bạn nên đặt tất cả bản trình bày điều khiển trong một phần tử <div>
duy nhất để có thể điều khiển như một đơn vị duy nhất. Chúng tôi sẽ sử dụng mẫu thiết kế này trong các mẫu được hiển thị dưới đây.
Để thiết kế các chế độ kiểm soát hấp dẫn, bạn cần biết 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 một phần tử nút xoay bả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ừ Chế độ kiểm soát tuỳ chỉnh
Để một thành phần điều khiển trở nên hữu ích, nó phải thực sự làm một điều gì đó. Bạn có toàn quyền quyết định việc kiểm soát này. 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 vớ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 trình nghe cho sự kiện 'click'
của trình duyệt. Xin lưu ý rằng sự kiện này nhận 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); });
Giúp người dùng dễ dàng sử dụng các chế độ kiểm soát tuỳ chỉnh
Để đảm bảo các chế độ điều khiển nhận được các sự kiện bàn phím và hiển thị đúng cách với trình đọc màn hình, hãy làm như sau:
- 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 thành phần giao diện người dùng tương tác.
- Sử dụng phần tử
label
, thuộc tínhtitle
hoặc thuộc tínharia-label
để cung cấp thông tin về một phần tử trên giao diện người dùng khi thích hợp.
Đặt vị trí các nút đ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 chúng tại các 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 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
trong số các chế độ điều khiển hiển thị ở vị trí đó. Do đó, khi thêm hoặc xoá các chế độ kiểm soát khỏi vị trí, API sẽ cập nhật các chế độ kiểm soát đó cho phù hợp.
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
; các chế độ điều khiển có chỉ mục thấp hơn sẽ được đặt trước.
Ví dụ: 2 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 khi đặt các chế độ điều khiển mặc định cho API. Bạn có thể ghi đè hành vi này bằng cách đặt thuộc tính index
của chế độ kiểm soát thành một giá trị âm. Bạn không thể đặt các nút điều khiển tuỳ chỉnh ở bên trái biểu trưng hoặc bên phải phần 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 hàm đó không xuất hiện) 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ề chế độ kiểm soát tuỳ chỉnh
Chế độ điều khiển sau 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 'click'
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;
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;
Thử mẫu
Thêm trạng thái vào chế độ điều khiển
Các thành phần điều khiển cũng có thể lưu trữ trạng thái. Ví dụ sau tương tự như ví dụ trước, nhưng chế độ điều khiển có thêm nút "Set Home" (Đặt vị trí nhà riêng) để thiết lập chế độ điều khiển để hiển thị một 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, đồ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;
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;