Embedded Files
Objektet:
Objekti DirectionsService na sherben per te kalkuluar directions. Ai komunikon me Google Maps API Directions Service i cili merr direction requests dhe kthen rezultatin e kalkuluar.
Rezultatin e marre si pergjigje mund ta procesojme vete ose te perdorim objektin DirectionsRenderer per te renderizuar rezultatin.
Directions Requests:
Per te bere thirrjen per DirectionsService perdoret DirectionsService.route() per te inicializuar kerkesen dhe kalohet si parameter objekti DirectionsRequest si me poshte:
{
origin: LatLng | String,
destination: LatLng | String,
travelMode: TravelMode,
transitOptions: TransitOptions,
unitSystem: UnitSystem,
durationInTraffic: Boolean,
waypoints[]: DirectionsWaypoint,
optimizeWaypoints: Boolean,
provideRouteAlternatives: Boolean,
avoidHighways: Boolean,
avoidTolls: Boolean
region: String
}
origin (domosdoshme) percakton piken e fillimit, mund te jete vlere String ("Tirane, AL") ose nje LatLng .
destination (domosdoshme) percakton piken e fundit, mund te jete vlere String ("Tirane, AL") ose nje LatLng .
travelMode (domosdoshme) percakton menyren e transportit.
transitOptions (opsionale) percakton opsione vetem per menyren travelMode te barabarte me google.maps.TravelMode.TRANSIT.
unitSystem (opsionale) specifikon sistemin qe do perdoret per shfaqjen e rezultateve.
durationInTraffic (opsionale) specifikon nese DirectionsLeg do te ktheje nje pergjigje e cila merr ne konsiderate kushtet e trafikut ne momentin qe behet request.
waypoints[] (opsionale) specifikon nje array me DirectionsWaypoint. Waypoints ndryshojne nje rrugetim duke e kaluar nga pikat e specifikuara ne te. Nje pike ka fushat e meposhtme:
location specifikon pozicionin , mund te jete LatLng ose String .
stopover boolean i cili percakton nese duhet te ndalohet ne nje route, e cila jep efektin e ndarjes se route ne dy route.
optimizeWaypoints (opsionale) specifikon se route e cila ka ne te waypoints duhet te ktheje route me te shkurter ne baze optimizimi.
provideRouteAlternatives (opsionale) kur e vendosim true specifikon se Directions service mund te ktheje me teper se nje route te mundshme. Kjo mund te shkaktoje vonesa per shkak te sasise se informacionit.
avoidHighways (opsionale) kur e vendosim true tregon se route duhet te shmangin Highways(Autostrada) .
avoidTolls (opsionale) kur e vendosim true tregon se route duhet te shmangin Tolls(Ngushticat).
region (opsionale) specifikon kodin e rajonit.
Shembull:
{
origin: "Tirane, AL",
destination: "Vlore, AL",
waypoints: [
{
location:"Durres, AL",
stopover:false
},{
location:"Fier, OK",
stopover:true
}],
provideRouteAlternatives: false,
travelMode: TravelMode.DRIVING,
unitSystem: UnitSystem.IMPERIAL
}
Travel Modes:
. google.maps.TravelMode.DRIVING : ky është dhe përcaktimi default në kërkimin e rezultateve, bazuar në rrjetin rrugor për automjete.
· google.maps.TravelMode.BICYCLING : gjen të gjitha mënyrat e kalimit për në destinacion në rrugë të kalushme nga bicikleta .
· google.maps.TravelMode.TRANSIT : rezultati i kthen të gjitha rrugët e kalueshme për në destinacion përmes pikave te transportit publik transit.
· google.maps.TravelMode.WALKING : kërkon të gjitha rrugët dhe trotuaret e kalueshme nga këmbësorët për të arritur në destinacion.
Shembull:
<!DOCTYPE html>
<html>
<head>
<title>Travel modes</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var Tirane = new google.maps.LatLng(41.331650 , 19.8318);
var Durres = new google.maps.LatLng(41.327122 , 19.454281);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: Tirane
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var selectedMode = document.getElementById('mode').value;
var request = {
origin: Tirane,
destination: Durres,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<b>Travel Mode: </b>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
<div id="map" style="height:500px;width:700px;"></div>
</body>
</html>
</html>
Transit Options:
Transit Options:
{
departureTime: Date,
arrivalTime: Date
}
Unit Systems:
UnitSystem.METRIC sistem metrik ne kilometra.
UnitSystem.IMPERIAL sistem metrik ne milje.
Shfaqja e rezultatit:
DirectionsResult mban rezultatet e query-it për gjetjen e rrugës/ve. Rezultatet e marra mund tetrajtohen në dy mënyra: vendosim të kujdesemi vet për vizualizimin e tyre ne hartë ose duke përdorur objektin DirectionsRenderer i cili shfaq ne mënyrë automatike rezultatet në hartë. Gjatë afishimit të rezultateve që marrim nga DirectionsResult , duke përdorur DirectionsRenderer, duhet të kujdesemi per:
1. Krijimin e një objekti DirectionsRenderer .
2. Thërritjen e metodës setMap() mbi një render në mënyrë që të bëjmë lidhjen e tij më hartën që I kalohet si parametër.
3. Metoden setDirections() ne render, ne menyre qe te marr rezultatet e DirectionsResult. Vet renderi eshte nje object MVC, dhe kap ne menyre automatike ngjarjet qe modifikojne te dhenat duke reflektuar në hartë ndryshimet përkatëse në rrugëtim. DirectionsRenderer shfaq një polyline midis dy destinacioneve duke vendosur markera në origjinë , në destinacion dhe në cdo pikë tjetër të ndërmjetme ku kalon rruga(përcaktimin e të cilave e bëjmë përmes atributit waypoints).
Shembull:
<!DOCTYPE html>
<html>
<head>
<title>Directions</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(41.38,19.81),
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP});
}
function directions(){
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
origin: document.getElementById('nga').value,
destination: document.getElementById('tek').value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
</head>
<body onload="initialize()">
Nga: <input type="text" id="nga"/></br>
Tek: <input type="text" id="tek"/></br>
<input type="button" id="navigo" value="Navigo" onclick="directions()"/>
<div id="map" style="width:500px;height:400px;"></div>
<div id="panel" style="width: 500px;"></div>
</body>
</html>
Directions service (complex):
<!DOCTYPE html>
<html>
<head>
<title>Directions service (complex)</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var directionsDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];
function initialize() {
// Inicializojme nje directions service.
directionsService = new google.maps.DirectionsService();
// Krijojme nje harte me qender ne Manhattan.
var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: manhattan
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// krijojme nje render per kete map.
var rendererOptions = {
map: map
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)
// Inicializojme nje info window per textin e hapit.
stepDisplay = new google.maps.InfoWindow();
}
function calcRoute() {
// Fillimisht heqim cdo marker nga harta.
for (var i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
// fshijme array-in.
markerArray = [];
// Marrim start dhe end
// inicializojme DirectionsRequest me WALKING TravelMode.
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.WALKING
};
// bejme routimin e directions dhe ia kalojme pergjigjen nje
// funksioni per te krijuar markera ne cdo hap.
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var warnings = document.getElementById('warnings_panel');
warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';
directionsDisplay.setDirections(response);
showSteps(response);
}
});
}
function showSteps(directionResult) {
// Per cdo hap, vendos nje marker, dhe shtojme tekstin ne
// info window te markerit. Shtojme kete marker ne nje array qe te
// kemi gjatesine e tij dhe ta heqim kur te kalkulojme
// routes.
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var marker = new google.maps.Marker({
position: myRoute.steps[i].start_point,
map: map
});
attachInstructionText(marker, myRoute.steps[i].instructions);
markerArray[i] = marker;
}
}
function attachInstructionText(marker, text) {
google.maps.event.addListener(marker, 'click', function() {
// Hap info window kur klikohet markeri me tekst hapin
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<b>Start: </b>
<select id="start">
<option value="penn station, new york, ny">Penn Station</option>
<option value="grand central station, new york, ny">Grand Central Station</option>
<option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option>
<option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
<option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<b>End: </b>
<select id="end" onchange="calcRoute();">
<option value="260 Broadway New York NY 10007">City Hall</option>
<option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
<option value="moma, New York, NY">MOMA</option>
<option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
<option value="253 West 125th Street, New York, NY">Apollo Theater</option>
<option value="1 Wall St, New York, NY">Wall St</option>
</select>
</div>
<div id="map-canvas" style="width:500px;height:400px;"></div>
<div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
</body>
</html>
Waypoints ne directions:
<!DOCTYPE html>
<html>
<head>
<title>Waypoints ne directions</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.331650 , 19.8318);
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
// Per cdo route, shfaq informacion permbledhes.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Route(Segment): ' + routeSegment + '</b><br>';
summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="float:left;width:700px;height:500px;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div style="margin:20px;border-width:2px;">
<b>Start:</b>
<select id="start">
<option>Lezhe</option>
<option>Tirane</option>
<option>Kruje</option>
<option>Shkoder</option>
</select>
<br>
<b>Waypoints:</b> <br>
<i>(Ctrl-Click)</i> <br>
<select multiple id="waypoints">
<option>Durres</input>
<option>Berat</input>
<option>Tepelene</input>
<option>Memaliaj</input>
<option>Elbasan</input>
<option>Korce</input>
<option>Lushnje</input>
</select>
<br>
<b>End:</b>
<select id="end">
<option>Sarande</option>
<option>Gjirokaster</option>
<option>Vlore</option>
<option>Permet</option>
</select>
<br>
<input type="submit" onclick="calcRoute();">
</div>
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</div>
</body>
</html>
Draggable directions:
<!DOCTYPE html>
<html>
<head>
<title>Draggable direction</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
var albania = new google.maps.LatLng(41.331650 , 19.8318);
function initialize() {
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: albania
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}
function calcRoute() {
var request = {
origin: 'Tirane',
destination: 'Sarande',
waypoints:[{location: 'Vlore'}, {location: 'Girokaster'}],
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById('total').innerHTML = total + ' km';
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="float:left;width:700px;height:500px;"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%">
<p>Distanca Totale: <span id="total"></span></p>
</div>
</body>
</html>
Page updated
Report abuse