Thiết bị điều khiển Google Maps

Google Maps - Các điều khiển mặc định

Khi hiển thị bản đồ Google tiêu chuẩn, nó cung cấp bộ điều khiển mặc định:

• Phóng to (Zoom) - Hiển thị thanh trượt hoặc nút "+/-" để kiểm soát mức phóng to của bản đồ
• Cuộn (Pan) - Hiển thị điều khiển cuộn để di chuyển bản đồ
• Loại bản đồ (MapType) - Cho phép người dùng chuyển đổi giữa các loại bản đồ (bản đồ đường và bản đồ vệ tinh)
• Chính sách đường phố (Street View) - Hiển thị biểu tượng người nhỏ (Pegman icon), có thể kéo thả lên bản đồ để kích hoạt chính sách đường phố

Google Maps - Các điều khiển khác

Ngoài các điều khiển mặc định, Google Maps còn cung cấp:

• Tỷ lệ (Scale) - Hiển thị yếu tố tỷ lệ của bản đồ
• Chuyển đổi (Rotate) - Hiển thị biểu tượng hình tròn nhỏ, cho phép bạn chuyển đổi bản đồ
• Bản đồ tóm tắt (Overview Map) - Hiển thị bản đồ tóm tắt, phản ánh khung nhìn hiện tại của bản đồ trong khu vực rộng hơn

Bạn có thể quy định các điều khiển nào hiển thị khi tạo bản đồ (trong MapOptions) hoặc thay đổi các tùy chọn bản đồ bằng cách gọi setOptions().

Google Maps - Tắt các điều khiển mặc định

Bạn có thể muốn tắt các điều khiển mặc định.

Về điều nà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ực thể

var mapOptions {disableDefaultUI: true}

Google Maps - Mở tất cả các điều khiển

Một số điều khiển sẽ xuất hiện mặc định trên bản đồ; trong khi những điều khiển khác sẽ không xuất hiện trừ khi bạn thiết lập chúng.

Vui lòng quy định các điều khiển để thêm hoặc xóa khỏi bản đồ trong đối tượng tùy chọn bản đồ.

Đặt điều khiển thành true để làm cho nó hiển thị - Đặt điều khiển thành false để ẩn nó.

Ví dụ này mở tất cả các điều khiển:

thực thể

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 đồ là có thể cấu hình.

Bạn có thể sửa đổi điều khiển bằng cách quy định champ tùy chọn của điều khiển.

Ví dụ, trong champ zoomControlOptions quy định các tùy chọn để sửa đổi điều khiển thu phóng. Champ zoomControlOptions có thể chứa:

• google.maps.ZoomControlStyle.SMALL - Hiển thị điều khiển thu phóng nhỏ gọn (chỉ nút + và -)
• google.maps.ZoomControlStyle.LARGE - Hiển thị điều khiển thanh 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ực thể

zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}

Lưu ý: Nếu muốn sửa đổi điều khiển, hãy bật điều khiển đó trước (đặt thành true).

Một điều khiển khác có thể cấu hình là điều khiển MapType.

Champs mapTypeControlOptions quy định các tùy chọn để sửa đổi điều khiển. Champs 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 đồ 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)

thực thể

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Bạn có thể sử dụng thuộc tính ControlPosition để định vị điều khiển:

thực thể

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position: google.maps.ControlPosition.TOP_CENTER
}