Xây dựng công cụ tính khoảng cách giữa 2 địa điểm bất kỳ trên web bằng Google Maps API. Hướng dẫn 1 Truy cập http://code.google.com/apis/ma...
Xây dựng công cụ tính khoảng cách giữa 2 địa điểm bất kỳ trên web bằng Google Maps API.
Hướng dẫn
- 1Truy cập http://code.google.com/apis/maps/signup.html để đăng ký với Google Maps và lấy API key.
- 2Tạo form để nhập 2 địa điểm cần tính khoảng cách
<table align="center" valign="center">
<tr>
<td colspan="7" align="center"><b>Find the distance between two locations</b></td>
</tr>
<tr>
</tr>
<tr>
<td>First address:</td>
<input name="<span class=" type="text" />address1" id="address1" size="50"/>
<td>Second address:</td>
<input name="<span class=" type="text" />address2" id="address2" size="50"/>
</tr>
<tr>
</tr>
<tr>
<td colspan="7" align="center"><input type="button" value="Show" onclick="initialize();"/></td>
</tr>
</table> - 3Tạo một div để hiển thị map
<div id="map_canvas" style="width:70%; height:54%"></div>
- 4Tạo 2 div hiển thị kết quả tính toán
<div style="width:100%; height:10%" id="distance_direct"></div>
<div style="width:100%; height:10%" id="distance_road"></div> - 5Viết hàm initialize, trước tiên chúng ta cần tính được tọa độ của 2 địa điểm, Google Maps API cung cấp đối tượng geocoder để thực hiện việc này
geocoder = new google.maps.Geocoder();
- 6Lấy 2 giá trị nhập từ form
address1 = document.getElementById("address1").value;
address2 = document.getElementById("address2").value; - 7Tiếp theo chúng ta sẽ gọi phương thức geocode của đối tượng geocoder để lấy tọa độ của 2 địa điểm và lưu vào 2 biến location1 và location2.
if (geocoder)
{
geocoder.geocode( { 'address': address1}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//location of first address (latitude + longitude)
location1 = results[0].geometry.location;
} else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
geocoder.geocode( { 'address': address2}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//location of second address (latitude + longitude)
location2 = results[0].geometry.location;
// calling the showMap() function to create and show the map
showMap();
} else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
} - 8Viết hàm showMap để hiển thị bản đồ, trước tiên chúng ta cần tính toán tọa độ trung tâm của bản đồ
latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);
- 9Tiếp theo chúng ta sẽ hiển thị bản đồ, thiết lập một số thông số trong biến mapOptions như zoom level, tọa độ trung tâm và kiểu bản đồ
var mapOptions =
{
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); - 10Hiển thị đường ngắn nhất giữa 2 địa điểm bằng cách dùng đối tượng DirectionsService
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
origin:location1,
destination:location2,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
distance += "The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
}
}); - 11Vẽ đường thẳng nối 2 địa điểm bằng cách dùng đối tượng Polyline
var line = new google.maps.Polyline({
map: map,
path: [location1, location2],
strokeWeight: 7,
strokeOpacity: 0.8,
strokeColor: "#FFAA00"
}); - 12Tính toán khoảng cách giữa 2 địa điểm và hiển thị kết quả
var R = 6371;
var dLat = toRad(location2.lat()-location1.lat());
var dLon = toRad(location2.lng()-location1.lng());
var dLat1 = toRad(location1.lat());
var dLat2 = toRad(location2.lat());
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(dLat1) * Math.cos(dLat1) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
document.getElementById("distance_direct").innerHTML = "The distance between the two points (in a straight line) is: "+d; - 13Cuối cùng, tạo 2 marker để hiển thị thông tin về 2 địa điểm khi người dùng click vào
var marker1 = new google.maps.Marker({
map: map,
position: location1,
title: "First location"
});
var marker2 = new google.maps.Marker({
map: map,
position: location2,
title: "Second location"
});
// create the text to be shown in the infowindows
var text1 = '
<div id="content">'+</div>
'<h1 id="firstHeading">First location'+
'<div id="bodyContent">'+
'<p>Coordinates: '+location1+'</p>'+
'<p>Address: '+address1+'</p>'+
'</div>'+
'</div>';
var text2 = '
<div id="content">'+</div>
'<h1 id="firstHeading">Second location'+
'<div id="bodyContent">'+
'<p>Coordinates: '+location2+'</p>'+
'<p>Address: '+address2+'</p>'+
'</div>'+
'</div>';
// create info boxes for the two markers
var infowindow1 = new google.maps.InfoWindow({
content: text1
});
var infowindow2 = new google.maps.InfoWindow({
content: text2
});
// add action events so the info windows will be shown when the marker is clicked
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
}); - 14Download source code và xem demo ở liên kết bên dưới.
No comments: