Bài 6: Các Kiểu Bản đồ Trong Google Maps - Tìm ở đây

Kiểu bản đồ HYBRID của Google:

Google Maps – Các kiểu bản đồ cơ bản

Google Maps API hỗ trợ các kiểu bản đồ sau:

• ROADMAP (thông thường, mắc định bản đồ 2D )
• SATELLITE (bản đồ vệ tinh hoặc ảnh hàng không)
• HYBRID (bản đồ ảnh hàng không + bản đồ đường và tên các thành phố)
• TERRAIN (bản đồ địa hình với các đỉnh núi các sông ngòi v.v)

Kiểu bản đồ được thiết lập trong cùng với các thuộc tính của đối tượng Map của google,  thuộc tính đó là mapTypeID:

var mapProp = { center:new google.maps.LatLng(45.434046,12.340284), zoom:7, mapTypeId: google.maps.MapTypeId.HYBRID };

hoặc bằng việc gọi phương thức setMapTypeId():

map.setMapTypeId(google.maps.MapTypeId.HYBRID);

Google Maps – Hiển thị phối cảnh 45°

Các kiểu bản đồ SATELLITE và HYBRID hỗ trợ hiển thị ảnh phối cảnh cho một số vị trí (chỉ ở mức zoom trên cao).

Nếu bạn phóng to vào một ví trí với góc 45° xem ảnh, bản đồ sẽ tự động thay đổi hiển thị phối cảnh. Ngoài ra, bản đồ sẽ có thêm :

• Control Rotate nằm ở cạnh nút Zoom cho phép bạn quoay ảnh
• Mỗi lần xoay cho phép bạn quoay ảnh 90°
• Control toggle (bật tắt) nằm giữa control Rotate và Zoom cho phép bạn bật tắt chức năng hiển thị phối cảnh 45°

Chú ý: Khi thu nhỏ bản đồ (Zooming out) với hiển thị phối cảnh 45° các ảnh sẽ được thu nhỏ về tương ứng với góc của phối cảnh này và ở mức thu nhỏ nhất bản đồ gốc sẽ được hiển thị ra.

Ví dụ demo bên dưới hiển thị phép chiếu phối cảnh của vùng Palazzo Ducale, Venice, Italy:

Ví dụ

var mapProp = { center:myCenter, zoom:18, mapTypeId:google.maps.MapTypeId.HYBRID };

Xem demo

Mách nhỏ: Google luôn cập nhật thêm dữ liệu hình ảnh chụp ở góc  45° cho các vị trí mới. Hiện có khoảng hơn 60 thành phố được google cập nhật loại ảnh này.

Google Maps – Vô hiệu hoá chưc năng hiển thị phối cảnh 45°- setTilt(0)

Bạn có thể vô hiệu hoá chức năng hiển thi phối cảnh 45° bằng cách gọi phương thức setTilt(0) của đối tượng Map:

Ví dụ

map.setTilt(0);

Xem demo

Mách nhỏ: Để bật chức năng hiển thị phối cảnh 45° bạn gọi lại phương thức của đối tượng Map: setTilt(45).

Google Maps – Tham khảo thêm

Tham khảo thư viện Google Maps API