LẬP TRÌNH GOOGLE MAPS API - Bài 4 – CÁC ĐIỀU KHIỂN

1 - Những đối tượng ĐIỀU KHIỂN MẶC ĐỊNH

• Zoom – với 2 nút (+) và (-) để phóng xa thu gần
  
• Pan - Hiển thị các nút di chuyển (trên di động???)
  
• MapType – kiểu hiển thị (bản đồ 2d hay ảnh vệ tinh...)
  
• Street View – xem đường phố thật bằng cách nắm hình nộm Pegman bỏ vào bản đồ (có chỗ xem được có chỗ không)
  

Và 1 số đối tượng bổ sung:

• Scale – thu phóng xa gần.
  
• Rotate – xoay hướng bản đồ.
  
• Overview Map – hiển thị 1 bản đồ nhỏ thumbnail phản ánh phần bản đồ đang hiển thị.
  

Bạn có thể thêm các điều khiển này bằng cách thêm thuộc tính khi tạo map (bên trong MapOptions) hoặc bằng cách gọi phương thức setOptions()


disableDefaultUI:true

2 - Bật toàn bộ các điều khiển

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

3 - Chỉnh sửa các điều khiển

1 vài điều khiển trên bản đồ cho phép cấu hình lại.

Các điều khiển có thể được điều chỉnh bằng cách thiết lập tùy chọn

Ví dụ đối tượng điều khiển ZoomControlStyle có thể được tùy biến qua các option.

• google.maps.ZoomControlStyle.SMALL – hiển thị công vụ Zoom tối thiểu (chỉ có dấu + và -)
• google.maps.ZoomControlStyle.LARGE – hiển thị công cụ Zoom đầy đủ.
• google.maps.ZoomControlStyle.DEFAULT – hiển thị công cụ Zoom mặc định.

Ví dụ:

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

Try it Yourself »

Ghi chú: Nếu bạn muốn tùy biến 1 control, luôn luôn bật mapTypeControl là TRUE

Thêm 1 điều khiển nữa có thể tùy biến là MapType.

Chú ý trong điều khiển MapType có thể có dấu ::

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR – hiển thị nút cho mỗi kiểu bản đồ.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU – hiển thị chọn kiểu bản đồ dạng listbox.
• google.maps.MapTypeControlStyle.DEFAULT – hiển thị kiểu mặc định.

Ví dụ:

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

Bạn cũng có thể định vị trí 1 điều khiển qua thuộc tính ControlPosition:

Ví dụ:

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

Điều khiển tự chế tạo 1 nút khi bấm vào tự động quay về quận 1

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Quay về quận 1';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);