Leksion - Driving Directions 02: Objektet

Leksion - Driving Directions 02
Objektet:
Objekti DirectionsService na sherben per te kalkuluar directions. Ai komunikon me Google Maps AP

Rezultatin e marre si pergjigje mund ta procesojme vete ose te perdorim objektin DirectionsRenderer
Directions Requests:
Per te bere thirrjen per DirectionsService perdoret DirectionsService.route() per te inicia

{
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 LatLn
 destination (domosdoshme) percakton piken e fundit, mund te jete vlere String ("Tirane, AL") ose nje L
 travelMode (domosdoshme) percakton menyren e transportit.
 transitOptions (opsionale) percakton opsione vetem per menyren travelMode te barabarte me google
 unitSystem (opsionale) specifikon sistemin qe do perdoret per shfaqjen e rezultateve.
 durationInTraffic (opsionale) specifikon nese DirectionsLeg do te ktheje nje pergjigje e cila merr n
 waypoints[] (opsionale) specifikon nje array me DirectionsWaypoint. Waypoints ndryshojne nje rrug
 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 d
 optimizeWaypoints (opsionale) specifikon se route e cila ka ne te waypoints duhet te ktheje route me te sh

 provideRouteAlternatives (opsionale) kur e vendosim true specifikon se Directions service mund te
se informacionit.
 avoidHighways (opsionale) kur e vendosim true tregon se route duhet te shmangin Highways(Autos
 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ë rrjet
· google.maps.TravelMode.BICYCLING : gjen të gjitha mënyrat e kalimit për në destinacion në rrugë të kalushme ng
· google.maps.TravelMode.TRANSIT : rezultati i kthen të gjitha rrugët e kalueshme për në destinacion përmes pikave
· google.maps.TravelMode.WALKING : kërkon të gjitha rrugët dhe trotuaret e kalueshme nga këmbësorët për të arrit
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:
{
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: ve
cili shfaq ne mënyrë automatike rezultatet në hartë. Gjatë afishimit të rezultateve që marrim nga DirectionsResult , duke pë
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ë
3. Metoden setDirections() ne render, ne menyre qe te marr rezultatet e DirectionsResult. Vet renderi eshte nje obje
ndryshimet përkatëse në rrugëtim. DirectionsRenderer shfaq një polyline midis dy destinacioneve duke vendosur marke
cilave e bëjmë përmes atributit waypoints).
Shembull:
<!DOCTYPE html>
<html>
<head>
<title>Directions</title>
<script type="text/javascript">
var map;
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 directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
origin: document.getElementById('nga').value,
destination: document.getElementById('tek').value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
}
});
}
</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>
var map;
var directionsService;
var stepDisplay;
var markerArray = [];
// 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,
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();
}
// 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.
var warnings = document.getElementById('warnings_panel');
warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';
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);
});
}
</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</opt
<option value="staten island ferry terminal, new york, ny">Staten Island Ferry Termi
<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>
var map;
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.331650 , 19.8318);
var mapOptions = {
zoom: 6,
center: chicago
}
}
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
};
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>';
}
}
});
}
</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>
var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var map;
var albania = new google.maps.LatLng(41.331650 , 19.8318);
var mapOptions = {
zoom: 7,
center: albania
};
directionsDisplay.setPanel(document.getElementById('directionsPanel'));
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {

computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}
var request = {
origin: 'Tirane',
destination: 'Sarande',
waypoints:[{location: 'Vlore'}, {location: 'Girokaster'}],
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
}
});
}
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';
}

</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>

Leksion - Driving Directions 02: Objektet

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Leksion - Driving Directions 02: Objektet

Uploaded by

Copyright:

Available Formats

Leksion - Driving Directions 02

Objekti DirectionsService na sherben per te kalkuluar directions. Ai komunikon me Google Maps AP

Per te bere thirrjen per DirectionsService perdoret DirectionsService.route() per te inicia

 optimizeWaypoints (opsionale) specifikon se route e cila ka ne te waypoints duhet te ktheje route me te sh

google.maps.event.addDomListener(window, 'load', initialize);

 UnitSystem.METRIC sistem metrik ne kilometra.

Directions service (complex):

// Krijojme nje harte me qender ne Manhattan.

// krijojme nje render per kete map.

// Inicializojme nje info window per textin e hapit.

// Fillimisht heqim cdo marker nga harta.

// Marrim start dhe end

// bejme routimin e directions dhe ia kalojme pergjigjen nje

for (var i = 0; i < myRoute.steps.length; i++) {

function attachInstructionText(marker, text) {

google.maps.event.addDomListener(window, 'load', initialize);

var albania = new google.maps.LatLng(41.331650 , 19.8318);

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {

google.maps.event.addDomListener(window, 'load', initialize);

You might also like