Embed Size (px)
Citation preview
Google Maps JavaScript
Người thực hiện: Vũ Mạnh Cường MSSV: 0912049
Những thứ còn lại
Hiểu được khái niệm các service Ứng dụng được một số service:
Geocoding, Directions, Street View
Google Maps JavaScript
Giới thiệu chung
Demo
Sơ lược các service
Giới thiệu chung
• Là một dịch vụ miễn phí từ Google• Dùng để xây dựng các ứng dụng dựa
trên địa điểm
Khởi tạo API
• Chèn đoạn script sau<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script>
Khởi tạo API
• Hàm khởi tạo đối tượng Map JavaScript API: function initialize() { var myOptions = { zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("div_name"), myOptions); }
Kết quả sau khi khởi tạo API
Công thức chung của các service
Tạo đối tượng của service Tạo request Nhận kết quả và xử lý
Sơ lược các service
Geocoding (tìm địa điểm) Directions (tìm đường đi giữa các điểm) Distance – matrix (khoảng cách giữa các
điểm)
Geocoding
Chức năng: dùng để xác định vị trí một địa điểm thông qua tên địa điểm hoặc qua kinh độ - vĩ độ
Ví dụ: - 227 Nguyễn Văn Cừ HCM
- (10.762495, 106.682428)
Geocoding
Geocoding
Tạo đối tượng của service Tạo request Nhận kết quả và xử lý
Geocoding – Tạo đối tượng
Tạo đối tượng của Geocoding service
geocoder = new google.maps.Geocoder();
→ Thực hiện các request
Geocoding - Tạo request
{ address: string, latLng: LatLng, bounds: LatLngBounds, region: string}
→ tên địa điểm muốn tìm→ kinh độ, vĩ độ địa điểm
Geocoding - Tạo request
Ví dụ 1:
{
address: nguyễn văn cừ hcm }
Ví dụ 2:
{
latLng: 10.762495, 106.682428 }
Geocoding – Nhận kết quả
results[]: { types[]: string, formatted_address: string, address_components[]: { short_name: string, long_name: string, types[]: string }, geometry: { location: LatLng, location_type: GeocoderLocationType viewport: LatLngBounds, bounds: LatLngBounds }}
→ map.setCenter(results[0].geometry.location);
Geocoding – Nhận kết quả
→ Dựa vào GeocoderStatus
?
Geocoding – GeocoderStatus
• OK : tìm kiếm thành công• ZERO_RESULTS: không tìm được kết quả thỏa• OVER_QUERY_LIMIT: số lần request đã vượt quá giới
hạn• REQUEST_DENIED : request bị từ chối• INVALID_REQUEST : request thiếu tham số
Sơ lược các service
Geocoding (tìm địa điểm) Directions (tìm đường đi giữa các điểm) Distance – matrix (khoảng cách giữa các
điểm)
Directions
Chức năng: dùng để xác định đường đi giữa 2 địa điểm cho trước, các hướng dẫn cụ thể.
Directions – Tạo đối tượng
Tạo đối tượng Directions service:var directionsService = new
google.maps.DirectionsService();→ Thực hiện các request
Directions – Tạo đối tượng
Tạo đối tượng Directions Display:var directionsDisplay = new
google.maps.DirectionsRenderer(rendererOptions);→ Thể hiện kết quả của request
directionsDisplay.setMap(map);→ Gắn kết quả lên bản đồ.
Directions – Tạo request
{ origin: LatLng | String, destination: LatLng | String, travelMode: TravelMode, unitSystem: UnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidHighways: Boolean, avoidTolls: Boolean region: String}
Directions – Tạo request
VD:{ origin:"An Sương", destination: "Nguyễn Trãi HCM", waypoints: [ { location:"Nguyễn Văn Cừ HCM", stopover:true }], travelMode: TravelMode.DRIVING, unitSystem: UnitSystem.IMPERIAL}
Directions – Nhận kết quả
response
- Directions Routes
-Directions Legs
- Directions Step
→ directionsDisplay.setDirections(response)
Directions – Kết quả
Directions – Waypoints
- Chứa một hoặc nhiều địa điểm.
- Cấu trúc:
waypoints: [ { location: string, stopover:boolean
}]
Directions – Waypoints
Ví dụ:
waypoints: [ { location: An Dương Vương HCM, stopover:true }
{ location: Lý Thường Kiệt HCM stopover:true }
]
Directions – Waypoints
Demo
