Hướng dẫn xây dựng một ứng dụng đơn giản trong việc tìm đường ứng dụng hệ thông Google maps api của Google. Thực hiện animation marker trong chuyển động từ điểm đầu đến điểm cuối trong việc tìm đường.
Trang 1MỤC LỤC
Tìm kiếm địa chỉ chính xác
6 Toàn bộ mã của chương trình
7 Tài liệu tham khảo
Phần I: LỜI MỞ ĐẦU
Ngày nay nhu cầu sử dụng bản đồ trong công việc của con người là rất lớn Internet bùng dẫn tới sự ra đời của rất nhiều công cụ bản đồ trực tuyến trong đó có Google Map, một dịch vụ hoàn toàn miễn phí Đối với các nhà phát triển web hay ứng dụng di động, ở đây, em muốn đề cập đến Google Maps API, một dịch vụ của Google, cho phép các nhà phát triển dễ dàng sử dụng các tiện ich trong việc phát triển các ứng dụng trên web hay trên di động
Trong phạm vi của bản báo cáo này, em chỉ tập trung vào dịch vụ, tiện ích tìm đường đi của Google Maps API giữa hai điểm xác định trên bản đồ và xây dựng một ứng dụng demo chuyển động của một hoặc nhiều animation từ điểm đầu đến điểm cuối trên đường đi tìm được
Trang 2Phần II: GOOGLE MAPS API
I Giới thiệu về Google Maps API:
1 Tổng quan về Google Maps API:
• Google Maps là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web được cung cấp miễn phí bởi Google Nó cung cấp các bản đồ đường đi, điều kiện giao thông thời gian thực, định tuyến các tuyến đường tối ưu cho việc di chuyển bằng cách đi bộ, sử dụng ô tô, hay sử dụng một số loại phương tiện giao thông công cộng, các hình ảnh vệ tinh về khắp nơi trên thế giới
• Maps API là:
- Đó là một phương thức cho phép 1 website các nhân hoặc tổ chức muốn sử dụng dịch
vụ của google, có thể nhúng Google map vào trang web của mình và có thể thực hiện một số thao tác rê chuột, zoom, đánh dấu trên bản đồ,
- Các ứng dụng xây dựng trên maps được nhúng vào trang web cá nhân thông qua các thẻ javascripts
• Google Maps API phiên bản hiện tại là phiên bản Google Maps API V3, cho phép hỗ trợ không chỉ các máy tính để bàn, laptop thông thường mà còn hỗ trợ cả các thiết bị di động một các dễ dàng
• Các dịch vụ này là hoàn toàn miễn phí với việc xây dựng một ứng dụng nhỏ không mang tính chất kinh doanh, doanh nghiệp
2 Một số ứng dụng có thể xây dựng từ việc sử dụng Google Maps API:
- Ứng dụng chỉ dẫn đường đi đến một địa điểm cần tìm, chỉ dẫn đường giao thông công cộng, ứng dụng du lịch, khám phá, thám hiểm,
- Đánh dấu các địa điểm trên bản đồ cùng các thông tin cho địa điểm: các khu vui chơi giải trí, nhà hàng khách sạn, quán ăn ngon, các shop quần áo thời trang,
Trang 3- Khoanh vùng các trung tâm kinh tế, công nghiệp, các khu vực bị ô nhiễm, các khu vực thường xuyên xảy ra ách tắc giao thông trong quy hoach giao thông, các khu vức đang xây dựng hay sử dụng trong việc quy hoạch đô thị,
- Ta có thể liệt kê một só ứng dụng cụ thể như: ứng dụng đánh dấu địa điểm trên facebook, ứng dụng Foody: cung cấp cho khách du lịch các địa điểm ăn uống ở hầy hết các tỉnh thành trên
cả nước, đặc biệt là các thành phố du lịch, ứng dụng ClingMe: giúp người dùng có thể tìm kiếm những quán ăn, nhà hàng, cà phê, tiệm bánh ngọt, xung quanh nơi bạn đang đứng gần nhất
II Mô tả các thành phần cần thiết trong tìm đường Google Maps API:
1 Load bản đồ về trang web cá nhân:
Để thực hiện việc tìm đường trên Google Map, trước ta cần phải tiến hành load bản đồ về trang web cá nhân:
- Trước hết, để sử dụng tất cả các ứng dụng Maps API cần phải có một API Key do Google cung cấp Key API này cho phép mỗi developer thực hiện kiểm soát các ứng dụng của mình và cũng là việc google có thể liên lạc với bạn về ứng dụng có ích bạn đang xậy dựng VD như:
< script type ="text/javascript" src ="http://maps.google.com/maps/api/js?
key=AIzaSyBdyNiBOdg6ikZli6MhG3ivZRw2fKdW-5I&sensor=true&libraries=geometry">
</ script >
- Bản đồ sau khi load được từ server của Google Maps là một bản đồ đơn giản Nó chỉ bao gồm các thao tác cơ bản như: zoom, kéo rê chuột, xem hình ảnh bản đồ đường đi hoặc hình ảnh
vệ tinh, Muốn thực hiện được những chức năng như tìm đường, chúng ta cần phải thực hiện lập trình, sử dụng các hàm được cung cấp bởi Google Maps API V3
- Để load bản đồ Google về trang web, chúng ta có thể sử dụng đoạn mã JavaScript sau:
<! DOCTYPE html
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=ISO-8859-1">
< title > Example2 </ title >
< script type ="text/javascript" src ="http://maps.google.com/maps/api/js? key=AIzaSyBdyNiBOdg6ikZli6MhG3ivZRw2fKdW-5I&sensor=true&libraries=geometry">
</ script >
< script type ="text/javascript">
function Setup(){
var Options = {
center: { lat: 21.02422526767355, lng: 105.84773308334343}, zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new
google.maps.Map(document.getElementById('map'),Options);
}
Trang 4</ script >
</ head >
< body onload ="Setup();" >
< div id ="map" style =" height : 100%" ></ div >
</ body >
</ html >
2 Marker:
-Marker: là một loại lớp phủ mà Google Maps API cho phép sử dụng để đánh dấu một vị trí
có tọa độ xác định Ngoài ra, chúng là những đối tượng thuộc lớp Markers của Google Maps API
- Google Maps API cho phép bạn thực hiện đánh dấu một hoặc nhiều marker trên bản đồ Một marker được sử dụng dưới dạng hình ảnh mặc định do Google Maps API cung cấp hoặc cũng có thể được thay thế bằng hình ảnh tùy thích của người lập trình
- Các Markers được thiết kế để tương tác Ví dụ, chúng ta có thể gán sự kiện ‘click’ để đánh
dấu lên một vị trí xác định trên bản đồ bằng mộ marker hoặc cũng có thể cho phép người sử dụng di chuyển marker như một animation trên một đường đi có điểm đầu và điểm cuối xác định
hay đơn giản chỉ là cho nó chuyển động tại chỗ bằng cách cho phép thuộc tính Draggable thành
true
- Các thao tác với marker:
• Thêm marker:
Một số thuộc tính của đối tượng Marker trong Google Maps Api:
- Position: Tọa độ xác định vị trí mà marker đánh dấu.
- Map: bản đồ chứa position mà marker đánh dấu Bản đồ này cần được xác định rõ
ràng khi thực hiện.Thông thường, bản đồ được đánh dấu chính là bản đồ mà bạn đã load về trước đó
- Icon (tùy chọn): lựa chọn hình ảnh mà lập trình viên cảm thấy phù hợp
- Title (tùy chọn): tiêu đề của địa điểm
- Draggable (tùy chọn): thể hiện sự chuyển động của Marker tại vị trí đánh dấu.
- Ví dụ về hàm thêm một marker (hàm addMarker1) và gán sự kiện click :
function addMarker1(location, map){
var marker1 = new google.maps.Marker({
position: location, map: map
});
}
map.addListener( 'click' ,function(event){ addMarker1(event.latLng, map);
});
Trang 5- Chúng ta cũng có thể đánh dấu nhiều marker vào bản đồ bằng cách tạo một mảng markers và đặt những marker đã đánh dấu lần lượt vào mảng:
Var markers = [];
function addMarker1(location, map){
var marker1 = new google.maps.Marker({
position: location, map: map
});
markers.push(marker1);
}
• Xóa marker:
- Để xóa một marker ra khỏi bản đồ, ta truyền tham số null cho phương thức setMap():
marker.setMap(null);
- Để xóa một mảng markers ta cũng có thể sử dụng phương thức setMap(), bằng cách
sử dụng một vòng lặp for chạy từ 0 đến markers.length:
function setMarkers(map){
for(var i=0; i<markers.length; i++){
markers[i].setMap(map);
} }
function clearMarkers(){
setMarkers(null);
}
• Ngoài ra còn có thể dịch chuyển Marker tại chỗ bằng cách đặt thuộc tính draggable trở thành true khi khai báo đối tượng Marker, sau đó lựa chọn một trong hai kiểu chuyển động tại chỗ của marker đó là DROP hoặc BOUNCE
3 Polylines:
• Polylines là một đường thẳng dùng để thể hiện đường kết nối trên bản đồ dựa vào các tọa
độ của các điểm trên đường đi Các đoạn thẳng được hiển thị với các tùy chọn cho nó như màu sắc, độ đậm nhạt, độ rộng của đường Phải có tối đa 2 điểm để tạo nên một đường thẳng
• Để hiển thị một Polyline trên bản đồ, chúng ta phải truyền vào hàm dựng của nó một polylineOptions, polylineOptions có các tham số cụ thể như sau:
- Path: là một mảng chứa các đối tượng LatLong (LatLong tọa độ các điểm mà đường
thẳng sẽ đi qua)
- StrokeColor: là 1 mã màu với hệ số hexa của HTML giúp đại diện màu hiển thị của
polyline
- StrokeOpacity: là môt số từ 0.0 đến 1.0 biểu hiện cho độ mờ của polyline.
- StrokeWeight: là một số nguyên dương biểu hiện cho độ rộng của polyline được tính
theo pixels
• Ví dụ về khai báo một Polyline:
Var polyLine = new google.maps.Polyline({
path: [],
Trang 6strokeColor: '#696969'
strokeOpacity: 1.0, strokeWeight: 2 });
4 Directions:
4.1. Tổng quan:
• Directions là chức năng chỉ dẫn đường đi, một ứng dụng khá phổ biến trong Google Map Bạn có thể tính toán đường đi bằng cách sử dụng đối tượng DirectionsService Đối tượng
sẽ ghi nhận yêu cầu tìm đường của bạn, truyền tới với Google Maps API Directions Service và nhận kết quả trả về
• Các kết quả trả về từ Google Maps API Directions Service có thể tương tác bằng các đối tượng DirectionsRenderer hoặc tự bản thân lập trình viên xử lý Kết quả trả về là một loạt các điểm có tọa độ được đặt trong một đường thẳng polyline được vẽ trên bản đồ, trình diễn đường đi từ điểm đầu đến điểm cuối của đường đi theo yêu cầu
4.2. Directions Service (Dịch vụ chỉ dẫn đường đi):
• Directions Service chứa các yêu cầu chỉ dẫn đường đi của người dùng, gửi chúng tới Server của Google, nhận kết quả trả về và hiển thị chúng ra màn hình bằng cách gọi tới
phương thức route(request, display)
• Phương thức DirectionsService.route( request, display):
- Request: một đối tượng chứa các yêu cầu cụ thể của người dùng về: điểm bắt đầu
(Origin), điểm kết thúc (Destination), loại hình di chuyển (Driving, Walking, Trasit ), …
- Display: hiển thị kết quả truy vấn Kết quả truy vấn gồm 2 thành phần:
DirectionsResult và DirectionsStatus:
o DirectionsResult: chứa các kết quả truy vấn mà Server gửi về sau khi xử
lý các yêu cầu của Request Kết quả này có thể được tự động xử lý và hiển thị trên bản đồ nếu khai báo nó như là một đối tượng DirectionsRenderer (sẽ được trình bày ở phần d) Một DirectionsResult bao gồm 2 thuộc tính: . Geocoded_waypoints[]: chứa một mảng chi tiết các tọa độ đã
được mã hóa giữa điểm đầu và điểm cuối
. Routes[]: chứa một mảng đối tượng DirectionsRoute Mỗi route
biểu thị một đường đi từ điểm đầu đến điểm cuối Thông thường, chỉ một đối tượng route được trả về cho một cặp điểm đầu điểm cuối Trong phần 4.1 sẽ nói chi tiết về DirectionsRoute
o DirectionsStatus: đưa ra trạng thái của DirectionsResult mà Server xử lý,
các giá trị như sau:
. OK: kết quả trả về trong DirectionsResult là hợp lệ
. NOT_FOUND: điểm đầu hoặc điểm cuối có giá trị không hợp lệ . ZERO_RESULTS: không có tuyến đường nào được tìm được giữa điểm đầu và điểm cuối
. INVALID_REQUEST: yêu cầu không hợp lệ
. OVER_QUERY_LIMIT: có quá nhiều yêu cầu được gửi và Server không kịp xử lý
Trang 7. REQUEST_DENIED: biểu thị trang web không cho phép sử dụng dịch vụ chỉ dẫn đường đi
. UNKNOWN_ERROR: yêu cầu không được xử lý do lỗi đường truyền, nên tiếp tục thử lại
4.3. Directions Requests (yêu cầu chỉ dẫn đường đi):
• Một đối tượng DirectionsRequest cần thiết phải có các thuộc tính sau đây:
- Origin: Latlng tọa độ điểm đầu của đường đi
- Destination: Latlng: tọa độ điểm cuối của đường đi
- TravelMode: Xác định lọai hình giao thông nào được sử dụng trong việc tính toán chỉ dẫn đường đi:
o google.maps.TravelMode.DRIVING: (mặc định) chỉ dẫn đường đi lái xe,
sử dụng mạng lưới đường đi giành cho ô tô
o google.maps.TravelMode.BiCYCLING: yêu cầu đường đi bằng xe đạp
o google.maps.TravelMode.TRANSIT: chỉ dẫn đường đi bằng phương tiện giao thông công cộng (tàu điện ngầm, xe bus…)
o google.maps.TravelMode.WALKING: yêu cầu đường đi giành cho người
đi bộ
- Ngoài ra còn một số thuộc tính khác như: waypoints[], optimizeWaypoints, … nhưng trong phạm vi báo cáo và Project I này sẽ không sử dụng đến nên sẽ không được trình bày tại đây Có thể truy cập đường dẫn sau để biết thêm chi tiết về các
https://developers.google.com/maps/documentation/javascript/directions#Directio nsRequests
• Ví dụ: khai báo một đối tượng request yêu cầu đi từ tìm đường đi từ điểm đầu đến điểm
cuối và sử dụng chế độ TravelMode là DRIVING:
Var start = {lat: 21.005, lng: 105.84460};
Var end = {lat: 20.00678, lng: 104.86322};
request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
4.4. DirectionsRenderer (Kết quả trả về):
• DirectionsResult chứa các kết quả truy vấn được trả về Nếu đặt nó như là một đối tượng DirectionsRenderer các xử lý với kết quả trả về sẽ được thực hiện tự động, bao gồm cả việc hiển thị tự động kết quả được trả về
• Để hiển thị một DirectionsResult bằng cách sử dụng DirectionsRenderer, chúng ta cần:
- Tạo một đối tượng DirectionsRenderer
- Gọi phương thức setMap() để ràng buộc đối tượng vừa tạo vào map
- Sử dụng phương thức setDirections() để gắn đối tượng renderer vào một DirectionsResult
• Ví dụ:
Var directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setMap(map);
Trang 84.5. DirectionsRoute:
• Trước tiên chúng ta có thể hình dung: 1 DirectionsRoute chứa một mảng DirectionsLeg,
1 DirectionsLeg lại chứa một mảng đối tượng DirectionsStep, 1 DirectionsStep lại có một
thuộc tính là path, thuộc tính này bao gồm một mảng các tọa độ của các điểm trên đường
đi của mỗi bước
• Một đối tượng DirectionRoute chỉ chứa một đường đi xác định giữa điểm đầu và điểm
cuối được yêu cầu và chưa một mảng legs[]: là các đoạn đường nhỏ hơn, nối tiếp nhau, đi
từ điểm đầu đến điểm cuối Các phần tử của legs[] được khai báo là đối tượng thuộc kiểu DirectonsLeg.
• DirectionsLeg: là một đoạn đường xác định giữa điểm đầu và điểm cuối Trong đó, điểm đầu và điểm cuối là các điểm trung gian trên đường đi mà Server được yêu cầu tìm kiếm
và đã được tính toán Một đối tượng DirectionsLeg có chứa các thuộc tính sau:
- Step[]: mảng các đối tượng DirectionsStep, mỗi đối tượng DirectionsStep mô tả
cụ thể một bước đi duy nhất của hành trình như hướng đi , thời gia, sự liên hệ tới nhứng step tiếp theo,… Ví dụ: “Đi về hướng tây trên Ngõ Tô Hoàng vè phó Ngõ
Áo Dài”, “Tiếp tục vào Ngõ 27 Đại Cồ Việt”,… Thuộc tính Path mỗi Step là
mảng các tọa độ của từng điểm địa lý trên bản đồ trong mỗi bước
- Start_location: chứa tọa độ của điểm bắt đầu mỗi đoạn đường (hay mỗi Leg)
- End_location: tọa độ của điểm kết thúc mối đoạn đường (hay mỗi Leg)
- Distance: độ dài của mỗi đoạn đường
5 Animation:
Sau khi tim đường bằng các đối tượng và thuộc tính bên trên, chúng ta có thể xậy dựng một Animation chuyển động từ điểm đầu đến điểm cuối trên đường đi vừa tìm được
• Bản chất chuyển động của Animation: đó là xuất hiện và biến mất liên tục của 1 marker trên các điểm có tọa độ của đường đi từ điểm đầu đến diểm cuối đã được xác định
• Hình ảnh của Animation: có thể tùy chọn hình ảnh của Marker theo ý thích của lập trình viên hoặc sử dụng hình ảnh marker mặc định của Google Map
• Tốc độ chuyển động của Animation: tốc độ này được tượng trưng bằng khoảng cách từ điểm mà marker đang đánh dấu đến điểm mới mà marker sẽ xuất hiện tiếp theo (tính theo meter trên bản đồ thực tế) và sử dụng hàm setTimeout() để tăng giảm thời gian xuất hiện của marker
Tốc độ chuyển động = Khoảng cách giữa điểm đánh dấu cũ và mới của Marker * thời gian xuất hiện marker.
• Đường di chuyển của Animation:
- Xem đường đi trả về từ Server là một đường thằng, chứa trong Polyline
- Đặt lần lượt tọa độ của tất cả các điểm trên đường đi, cụ thể ở đây chính là các mảng tọa độ trong thuộc tính path của mỗi đối tượng Step, vào trong thuộc tính Path của Polyline
- Có thể tùy chỉnh màu sắc, độ rộng đường đi bằng các thuộc tính strokeColor và strokeWeight của Polyline
Trang 9- Độ dài đường đi: được tính bằng tổng khoảng cách giữa các các điểm có tọa độ nằm trên đường đi từng đôi một
Distance =Distance + distanceFrom( Điểm Marker đang đánh dấu, điểm Marker sẽ đánh dấu tiếp theo)
Phần III: XÂY DỰNG ỨNG DỤNG DEMO
• Sử dụng các kiến thức ở trên để xây dựng một ứng dụng tìm một hoặc nhiều đường đi
• một lúc giữa các cặp điểm đầu và điểm xác định trên Google Map Sau đó, cho một animation hình ô tô chuyển động từ điểm đầu đến điểm cuối trên mỗi đường đi
• Ứng dụng cho phép người dùng tìm đường không giới hạn trong một thời điểm bằng chỉ cần bằng cách click đánh dấu trên bản đồ:
o Click thứ nhất đánh dấu điểm bắt đầu
o Click thứ hai đánh dấu điểm kết thúc
o Lặp đi lặp lại như vậy nhiều lần sẽ tạo ra nhiều yêu cầu tìm đường cùng một lúc
o Click vào nút “Start” để bắt đầu tìm đường, hiển thị đường đi và chuyển động animation trên mỗi đường đi
o Để xác định chính xác địa điểm mà người dùng muốn tìm đường, người dùng có thể nhập chính xác địa chỉ vào ô Address sau đó nhấn nút Search
• Các bước hướng dẫn xây dựng ứng dụng như sau:
1. Load bản đồ:
• Tiến hành load bản đồ Google Maps về trang web cá nhân bằng cách sử dụng hàm sau:
Var Center = {lat: 21.005; lng: 105.84460};
function setup(){
var Options={
center: Center, zoom: 16,
mapTypeId: google.maps.MapTypeId.ROAD };
google.maps.Map(document.getElementById( 'map' ),Options);
}
• Trong đó:
- Center là trung tâm hiển thị của bản đồ
Trang 10- Google.maps.MapTypeId.ROAD: loại bản đồ hiển thị là bản đồ đường phố.
2. Add Marker và xác định điểm đầu điểm cuối của mỗi yêu cầu:
• Sử dụng một mảng chứa các Markers[] để thực hiện đánh dấu nhiều marker trên bản đồ một lúc Sau mỗi lần click đánh dấu marker trên bản đồ, đặt marker vừa đánh dấu vào mảng:
Var markers=[];
function addMarker1(location, map){
var marker1 = new google.maps.Marker({
position: location, map: map
});
markers.push(marker1);
}
• Xây dựng các hàm xóa marker khỏi bản đồ khi cần thiết:
function setMarkersOnAll(map){
for(var i=0; i<markers.length; i++){
markers[i].setMap(map);
} }
function clearMarkers(){
setMarkersOnAll(null);
}
• Tạo ra hai mảng: mảng start[] chứa các điểm bắt đầu của yêu cầu tìm đường đi, mảng end[] chứa điểm kết thúc của đường đi
• Mỗi phần của mảng start hoặc mảng end được gán bằng tọa độ của một phần tử marker được đánh dấu trên bản đồ trong mảng Markers[] xây dựng trước đó Cũng có thể hiểu là mỗi lần click đánh dấu marker lên bản đồ là một lần chúng ta lựa chọn điểm đầu hoặc điểm cuối của đường đi:
function addStartEnd(){
for(var i=0; i< markers.length; i=i+2){
start[i] = markers[i].position;
end[i] = markers[i+1].position;
} }
3. Xây dựng các hàm tìm đường cho nhiều đường đi một lúc:
• Tạo một mảng Polyline[], mỗi phần tử của mảng này là một đường đi kết quả được trả về
từ Server tương ứng với mỗi yêu cầu của người dùng
• Tạo mảng request[] để chứa các yêu cầu đường đi của người dùng, mảng display[] để hiển thị kết quả tương ứng với các request có cùng chỉ số
• Xây dựng mảng Requets[]: sử dụng các phần tử mảng của mảng start[] và end[] trước đó
để xây dựng từng phần tử request TravelMode chung sử dụng ở đây là DRIVING
request[index] = {