Kiểm soát Google Maps
Google Maps - Các điều khiển mặc định
Khi hiển thị một bản đồ chuẩn của Google, 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 các nút "+/-" để điều khiển 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 - Nhiều quyền kiểm soát 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ị một biểu tượng hình tròn nhỏ cho phép bạn xoay bản đồ
- Bản đồ toàn cảnh - 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 lớn hơn
Bạn có thể chỉ định đ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 - Tắt 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 disableDefaultUI của Bản đồ (trong đối tượng Tùy chọn bản đồ) thành true:
Thí 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 ngườ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.
Ví dụ sau bật "bật" tất cả các điều khiển:
Thí dụ
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google Maps - Điều khiển sửa đổi
Một số điều khiển bản đồ có thể định cấu hình.
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ỉ 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 đồ
Thí dụ
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
Lưu ý: Nếu bạn sửa đổi điều khiển, hãy luôn bật điều khiển trước (đặt điều khiển đó thành true).
Một điều khiển có thể định 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" (phụ thuộc vào kích thước màn hình)
Thí dụ
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
Bạn cũng có thể định vị một điều khiển, với thuộc tính ControlPosition:
Thí dụ
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}