Xây dựng ứng dụng tìm đường bằng google maps api

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (238.77 KB, 19 trang )

MỤ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.

1

Phầ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, ....
2

- 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=" />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=" />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);
}

3

</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){
map);

addMarker1(event.latLng,

});

4

-

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; imarkers[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: [],

5

strokeColor: '#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ý.

6

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
thuộc
tính
trên:
/>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);

7

directionsDisplay.setDirections(directionsResult);

4.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.
8

-

Độ 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
};
map
=
google.maps.Map(document.getElementById('map'),Options);
}

•

new

Trong đó:
- Center là trung tâm hiển thị của bản đồ.
9

-

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; imarkers[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] = {

10

};

•

origin: start[index],
destination: end[index],
travelMode: google.maps.DirectionsTravelMode.DRIVING

Xây dựng mảng Display[]: mỗi phần tử Display có chỉ số tương ứng với phần tử
Request. Chúng sẽ nhận được kết quả trả về từ Server thông qua đối tượng
DirectionsRenderer được tạo mới tương ứng và đặt tọa độ của từng điểm trên đường đi
vào một phần tử Polyline có chỉ số giống với nó. Sau đó gọi đến sự chuyển động của
animation.
display[index]=function(rep, status){
if(status == google.maps.DirectionsStatus.OK){
polyLine[index] = new google.maps.Polyline({
path: [],

strokeColor: '#696969'
});

directionsDisplay
google.maps.DirectionsRenderer();

=

new

directionsDisplay.setMap(map);
directionsDisplay.setDirections(rep);
startLocation[index] = new Object();
endLocation[index] = new Object();
var legs = rep.routes[0].legs;
for(var h=0; hif(h==0){
startLocation[index].latlng
legs[h].start_location;

marker[index]
addMarker(legs[h].start_location, map);
}
endLocation[index].latlng
legs[h].end_location;

=
=
=

var
var

Tạo mảng distance[] là mảng chứa độ dài đường đi tương ứng với mỗi đường đi được trả
về. Số phần tử của mảng bằng số phần tử của mảng start[].
Tạo các biến số: step (khoảng cách dịch chuyển của marker), time (thời gian xuất hiện
của marker), d (quãng đường mà marker đã đi qua).
Vận tốc chuyển động của marker được hiểu như sau:
- Nếu step có giá trị càng lớn, tức là quãng đường đi được trong thời gian time tăng
lên thì marker sẽ chuyển động nhanh hơn trên đường đi và ngược lại.
- Trong ứng dụng này để người dùng có thể tiện lợi trong việc thay đổi vận tốc
chuyển động của marker, chúng ta cho phép người dùng thay đổi vận tốc của
marker trong ô đầu vào Speed.
Người dùng có thể thay đổi giá trị của biến Step để thay đổi giá trị của vận tốc chuyển
đông
Xây dựng hàm gọi đến chuyển động của marker:
- Tính độ dài mỗi đường đi: gắn giá trị tính toán được cho mỗi phần tử của mảng
distance[]
- Thực hiện di chuyển marker bằng cách: cho marker xuất hiện ở vị trí mới cách vị
trí cũ một khoảng bằng step (đã khai báo ở trên). Sử dụng hàm
GetPointAtDistance() để tính toán tọa độ chính xác của điểm mà marker sẽ xuất
hiện.
- Sử dụng hàm setTimeout để điều khiển thời gian xuất hiện của marker. Ở đây
chúng ta sử dụng biến time = 0,5 milisecond sẽ cho cảm giác marker xuất hiện
một cách liên tục trên đường đi.
- Sau mỗi lần xuất hiện ở địa điểm mới, cộng vào d (biến lưu trữ quãng đường mà
marker đã đi một giá trị bằng step).
- Nếu quãng đường đã đi qua nhỏ hơn độ dài thì tiếp tục gọi đến chuyển động của
marker, ngược lại thì gắn marker vào điểm cuối cùng của đường đi và không gọi
đến hàm chuyển động của marker nữa.

d;
count=0;
distance=[];
time = 0.05;

function startAnimation(number){
var a = document.getElementById("a");
// meters
var step = parseInt(a.value);
distance[number] = polyLine[number].Distance();

12

}

setTimeout("animate("+number+",1,"+step+")", 2000);

function animate(number,d,step){
if(d > distance[number]){
marker[number].setPosition(endLocation[number].latlng);
return;
}
var p = polyLine[number].GetPointAtDistance(d); //
marker[number].setPosition(p);
var a = d + step;
//count = count + step;
setTimeout("animate("+number+","+a+","+step+")", time);
}

5. Tìm kiếm địa chỉ chính xác:
•

Google Maps API cho phép chúng ta mã hóa bất kỳ một địa chỉ địa lý nào mà
cong người thường hay sử dụng ví dụ như: “số 1, Đại Cồ Việt, Hai Bà Trưng, Hà
Nội ” sang tọa độ địa lý. Việc mã hóa này được thực hiện thông qua việc sử dụng
đối tượng Geocoder(). Việc sử dụng Geocoder() chúng ta có thể xem tại:
/>ingResults

•

Sử dụng các hàm được Google Maps API cung cấp sẵn, chúng ta sẽ xây dựng
được hàm xác đinh chính xác tọa độ được người dùng thêm vào.

// hàm Geocoding
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var positions = results[0].geometry.location;
resultsMap.setCenter(positions);
addMarker1(positions, resultsMap);
} else {
alert('Khong the ma hoa dia chi dia ly vi : '

status);
}

+

}

);
}

6. Toàn bộ mã hoàn chỉnh của ứng dụng:
13

Gồm có 3 phần: phần code JavaScript, code HTML và code CSS.
• Code JavaScript:
var
var
var
var
var
var

Center= {lat: 21.005,lng: 105.84460};
map;
marker=[];
marker1;
markers=[];
polyLine=[];

var
var
var
var

startLocation = [];
endLocation =[];
start= [];
end= [];

var geocoder = new google.maps.Geocoder();
// hàm load Google map
function setup(){
var Options={
center: Center,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROAD
};
map = new google.maps.Map(document.getElementById('map'),Options);
// thêm sự kiện: addMarker
map.addListener('click',function(event){
addMarker1(event.latLng, map);
});
// geocoding
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
// đánh dấu diểm trên bản đồ
function addMarker1(location, map){
var marker1 = new google.maps.Marker({
position: location,
map: map
});

}

markers.push(marker1);

function setMarkersOnAll(map){
for(var i=0; imarkers[i].setMap(map);
}
}

14

function clearMarkers(){
setMarkersOnAll(null);
}
// hàm tạo animation marker
function addMarker(location, map){
var marker = new google.maps.Marker({
position: location,
map: map,
icon: "icon_oto.png",
});
return marker;
}

var
var
var
var

directionsService = new google.maps.DirectionsService;
directionsDisplay = [];
request = [];
display = [];

//chuyển động của các animation
function set(){
addStartEnd();
clearMarkers();
var i=0;
for( i=0; i< start.length; i= i+2){
calculateAndDisplay(directionsService, directionsDisplay[i], i);
}
}
//thêm điểm bắt đầu và kết thúc của animation
function addStartEnd(){
for(var i=0; i< markers.length; i=i+2){
start[i] = markers[i].position;
end[i] = markers[i+1].position;
}
}
//hàm tính toán đường đi và di chuyển marker
function calculateAndDisplay(directionsService, directionsDisplay, index){

// đối tượng yêu cầu đường đi
request[index] = {
origin: start[index],
destination: end[index],
travelMode: google.maps.DirectionsTravelMode.DRIVING

};
//đối tượng trả về kết quả
display[index]=function(rep, status){

15

if(status == google.maps.DirectionsStatus.OK){
polyLine[index] = new google.maps.Polyline({
path: [],
strokeColor: '#696969'
});

directionsDisplay = new
google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setDirections(rep);
startLocation[index] = new Object();
endLocation[index] = new Object();
var legs = rep.routes[0].legs;
for(var h=0; hif(h==0){
startLocation[index].latlng =
legs[h].start_location;

marker[index] =
addMarker(legs[h].start_location, map);
}
endLocation[index].latlng =
legs[h].end_location;

alert(a.value);
alert(step);
distance[number] = polyLine[number].Distance();
setTimeout("animate("+number+",1,"+step+")", 2000);
}
function animate(number,d,step){
// nếu đi hết đường thì cho oto dưng ở điểm cuối
if(d > distance[number]){
marker[number].setPosition(endLocation[number].latlng);
return;
}
var p = polyLine[number].GetPointAtDistance(d);
marker[number].setPosition(p);
var a = d + step;
setTimeout("animate("+number+","+a+","+step+")", time);
}
// hàm Geocoding
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var positions = results[0].geometry.location;
//biến
lưu vị trí kết quả sau khi mã hóa địa chỉ thành công
resultsMap.setCenter(positions);
//đặt vị trí
trung tâm bản đồ về vị trí vừa tìm thấy
addMarker1(positions, resultsMap);
//đánh dấu
vị trí trung tâm của bản đồ kết quả tìm thấy

} else {
alert('Khong the ma hoa dia chi dia ly vi : ' +
status);
}
}
);
}
// tinh toan khoang cach giua 2 diem
// khi biet toa do dia ly cua chung.

17

google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
var EarthRadiusMeters = 6378137.0; // meters
var lat1 = this.lat();
var lon1 = this.lng();
var lat2 = newLatLng.lat();
var lon2 = newLatLng.lng();
var dLat = (lat2-lat1) * Math.PI / 180;
var dLon = (lon2-lon1) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = EarthRadiusMeters * c;
return d;
}
// tinh khoang cach giua diem dau va diem cuoi cua mot doi tuong
google.maps.Polygon.prototype.Distance = function(){

/* Prototype của các hàm */
google.maps.Polyline.prototype.Distance
google.maps.Polygon.prototype.Distance;
google.maps.Polyline.prototype.GetPointAtDistance
google.maps.Polygon.prototype.GetPointAtDistance;

=
=

18

7. Tài liệu tham khảo:
•
•

Document toturial của các ngôn ngữ hay thiết bị tìm kiếm tại :
/>Hoặc
tuturial
phổ
biến
nhất
/>
19

Xây dựng ứng dụng tìm đường bằng google maps api

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về