Điều khiển Google Maps
Google Maps - Điều khiển mặc định
Khi hiển thị bản đồ Google tiêu chuẩn, nó đi kèm với bộ điều khiển mặc định:
- Thu phóng - hiển thị thanh trượt hoặc nút "+/-" để kiểm soát mức thu phóng của bản đồ
- Xoay - hiển thị điều khiển xoay để xoay bản đồ
- MapType - cho phép người dùng chuyển đổi giữa các loại bản đồ (lộ trình và vệ tinh)
- Chế độ xem phố - hiển thị biểu tượng Người hình mắc áo có thể được kéo vào bản đồ để bật Chế độ xem phố
Google Maps - Kiểm soát nhiều hơn
Ngoài các điều khiển mặc định, Google Maps còn có:
- Tỷ lệ - hiển thị phần tử tỷ lệ bản đồ
- Xoay - hiển thị biểu tượng hình tròn nhỏ cho phép bạn xoay bản đồ
- Bản đồ tổng quan - hiển thị bản đồ tổng quan hình thu nhỏ phản ánh chế độ xem bản đồ hiện tại trong một khu vực rộng hơn
Bạn có thể chỉ định những điều khiển nào sẽ hiển thị khi tạo bản đồ (bên trong MapOptions) hoặc bằng cách gọi setOptions() để thay đổi các tùy chọn của bản đồ.
Google Maps - Vô hiệu hóa các điều khiển mặc định
Thay vào đó, bạn có thể muốn tắt các điều khiển mặc định.
Để làm như vậy, hãy đặt thuộc tính vô hiệu hóaDefaultUI của Bản đồ (trong đối tượng tùy chọn Bản đồ) thành true:
Ví dụ
var mapOptions {disableDefaultUI: true}
Google Maps - Bật tất cả các điều khiển
Một số điều khiển xuất hiện trên bản đồ theo mặc định; trong khi những cái khác sẽ không xuất hiện trừ khi bạn đặt chúng.
Việc thêm hoặc xóa các điều khiển khỏi bản đồ được chỉ định trong đối tượng Tùy chọn bản đồ.
Đặt điều khiển thành true để hiển thị - Đặt điều khiển thành false để ẩn nó.
Ví dụ sau đây bật "bật" tất cả các điều khiển:
Ví dụ
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google Maps - Sửa đổi điều khiển
Một số điều khiển bản đồ có thể cấu hình được.
Các điều khiển có thể được sửa đổi bằng cách chỉ định các trường tùy chọn điều khiển.
Ví dụ: các tùy chọn để sửa đổi điều khiển Thu phóng được chỉ định trong trường zoomControlOptions. Trường zoomControlOptions có thể chứa:
- google.maps.ZoomControlStyle.SMALL - hiển thị điều khiển thu phóng nhỏ (chỉ các nút + và -)
- google.maps.ZoomControlStyle.LARGE - hiển thị điều khiển thanh trượt thu phóng tiêu chuẩn
- google.maps.ZoomControlStyle.DEFAULT - chọn điều khiển thu phóng tốt nhất dựa trên thiết bị và kích thước bản đồ
Ví dụ
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
Lưu ý: Nếu bạn sửa đổi một điều khiển, trước tiên hãy luôn bật điều khiển đó (đặt thành true).
Một điều khiển có thể cấu hình khác là điều khiển MapType.
Các tùy chọn để sửa đổi điều khiển được chỉ định trong trường mapTypeControlOptions. Trường mapTypeControlOptions có thể chứa::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - hiển thị một nút cho mỗi loại bản đồ
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - chọn loại bản đồ thông qua menu thả xuống
- google.maps.MapTypeControlStyle.DEFAULT - hiển thị hành vi "mặc định" (tùy thuộc vào kích thước màn hình)
Ví dụ
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
Bạn cũng có thể định vị một điều khiển bằng thuộc tính ControlPosition:
Ví dụ
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}