Foros del Web » Soporte técnico » Ayuda General »

geolocalizacion de una ruta con waypoint api de google maps

 Estas en el tema de geolocalizacion de una ruta con waypoint api de google maps en el foro de Ayuda General en Foros del Web. hola bueno estoy haciendo mi proyecto de titulo y necesito hacer rutas dependiendo de mi origen (geolocalizacion) he hitos sacados de una base de datos. ...
  #1 (permalink)  
Antiguo 08/05/2015, 14:45
 
Fecha de Ingreso: mayo-2015
Mensajes: 2
Antigüedad: 9 años, 7 meses
Puntos: 0
geolocalizacion de una ruta con waypoint api de google maps
hola bueno estoy haciendo mi proyecto de titulo y necesito hacer rutas dependiendo de mi origen (geolocalizacion) he hitos sacados de una base de datos.
Aqui esta mi codigo le falta geolocalizar .

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> Waypoints </title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var local = new google.maps.LatLng(-36.920193, -73.026995);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: local
}
map = new google.maps.Map(document.getElementById("map_canva s"), myOptions);
directionsDisplay.setMap(map);
calcRoute();


function calcRoute() {
function informacion (coordenadas) {
$("#latitude").html(coordenadas.Lat);
$("#longitude").html(coordenadas.Lng);
}
var coordenadas = {
Lat: 0,
Lng: 0
};

function localizacion (posicion) {
coordenadas = {
Lat: posicion.coords.latitude,
Lng: posicion.coords.longitude
}

informacion(coordenadas);
var local = new google.maps.LatLng(coordenadas.Lat, coordenadas.Lng);
var request = {
origin: local,

waypoints:[{location:' (-36.925579, -73.025150) '},
{location:' (-36.925957, -73.028669) '},{location:' (-36.916899, -73.025707) '}],

optimizeWaypoints: true,
destination: "(-33.47985788103725, -70.64004394531253)",

travelMode: google.maps.DirectionsTravelMode.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 = "";
// For each route, display summary information.
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 />";
summaryPanel.innerHTML += route.legs[i].duration.text + "<br />";
}

computeTotalDistance(response);
} else {
alert("directions response "+status);
}
});//fin directionServise
}//fin localizacion
}//fin cal ruta
}// fin inicialiti
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "total distance is: "+ totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes";
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
<div id="total"></div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">

</script>
</body>
</html>
  #2 (permalink)  
Antiguo 08/05/2015, 18:34
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 3 meses
Puntos: 145
Respuesta: geolocalizacion de una ruta con waypoint api de google maps
Bienvenido a FDW. Por favor, utiliza el Highlight que proporciona el foro, así no tenemos que leer código en texto plano.



Por otra parte, ¿qué necesitas? Porque leo que "falta geolocalizar", pero no aportas ninguna información más.
__________________
¿Te sirvió la respuesta? Deja un +1
  #3 (permalink)  
Antiguo 11/05/2015, 12:42
 
Fecha de Ingreso: mayo-2015
Mensajes: 2
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: geolocalizacion de una ruta con waypoint api de google maps
Hola NueveReinas ,sip lo que me falta es geolocalizar la posicion actual que la da el navegador y ponerla como el inicio de la ruta y encontrar el waypoint mas alejado como el final en esta parte del codigo:
Código HTML: 
Ver original
  1. var request = {
  2. origin: local,
  3.  
  4. waypoints:[{location:' (-36.925579, -73.025150) '},
  5. {location:' (-36.925957, -73.028669) '},{location:' (-36.916899, -73.025707) '}],
  6.  
  7. optimizeWaypoints: true,
  8. destination: "(-33.47985788103725, -70.64004394531253)",
  9.  
  10. travelMode: google.maps.DirectionsTravelMode.DRIVING
  11. };

el contexto del proyecto es qu estas en alguna parte y necesitas ir a visitar museos entonces tomas tu posicion actual y de la base de datos ya ingresada extraer las cordenas y encontrar la mas distante para poner del fin de la ruta.

Codigo completo:
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  5. <title> Waypoints </title>
  6. <style type="text/css">
  7. html { height: 100% }
  8. body { height: 100%; margin: 0px; padding: 0px }
  9. </style>
  10. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  11. <script type="text/javascript">
  12. var directionDisplay;
  13. var directionsService = new google.maps.DirectionsService();
  14. var map;
  15.  
  16. function initialize() {
  17. directionsDisplay = new google.maps.DirectionsRenderer();
  18. var local = new google.maps.LatLng(-36.920193, -73.026995);
  19. var myOptions = {
  20. zoom: 6,
  21. mapTypeId: google.maps.MapTypeId.ROADMAP,
  22. center: local
  23. }
  24. map = new google.maps.Map(document.getElementById("map_canva s"), myOptions);
  25. directionsDisplay.setMap(map);
  26. calcRoute();
  27.  
  28.  
  29. function calcRoute() {
  30. function informacion (coordenadas) {
  31. $("#latitude").html(coordenadas.Lat);
  32. $("#longitude").html(coordenadas.Lng);
  33. }
  34. var coordenadas = {
  35. Lat: 0,
  36. Lng: 0
  37. };
  38.  
  39. function localizacion (posicion) {
  40. coordenadas = {
  41. Lat: posicion.coords.latitude,
  42. Lng: posicion.coords.longitude
  43. }
  44.  
  45. informacion(coordenadas);
  46. var local = new google.maps.LatLng(coordenadas.Lat, coordenadas.Lng);
  47. var request = {
  48. origin: local,
  49.  
  50. waypoints:[{location:' (-36.925579, -73.025150) '},
  51. {location:' (-36.925957, -73.028669) '},{location:' (-36.916899, -73.025707) '}],
  52.  
  53. optimizeWaypoints: true,
  54. destination: "(-33.47985788103725, -70.64004394531253)",
  55.  
  56. travelMode: google.maps.DirectionsTravelMode.DRIVING
  57. };
  58. directionsService.route(request, function(response, status) {
  59. if (status == google.maps.DirectionsStatus.OK) {
  60. directionsDisplay.setDirections(response);
  61. var route = response.routes[0];
  62. var summaryPanel = document.getElementById("directions_panel");
  63. summaryPanel.innerHTML = "";
  64. // For each route, display summary information.
  65. for (var i = 0; i < route.legs.length; i++) {
  66. var routeSegment = i + 1;
  67. summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
  68. summaryPanel.innerHTML += route.legs[i].start_address + " to ";
  69. summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
  70. summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
  71. summaryPanel.innerHTML += route.legs[i].duration.text + "<br />";
  72. }
  73.  
  74. computeTotalDistance(response);
  75. } else {
  76. alert("directions response "+status);
  77. }
  78. });//fin directionServise
  79. }//fin localizacion
  80. }//fin cal ruta
  81. }// fin inicialiti
  82. function computeTotalDistance(result) {
  83. var totalDist = 0;
  84. var totalTime = 0;
  85. var myroute = result.routes[0];
  86. for (i = 0; i < myroute.legs.length; i++) {
  87. totalDist += myroute.legs[i].distance.value;
  88. totalTime += myroute.legs[i].duration.value; 
  89. }
  90. totalDist = totalDist / 1000.
  91. document.getElementById("total").innerHTML = "total distance is: "+ totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes";
  92. }
  93.  
  94. </script>
  95. </head>
  96. <body onload="initialize()">
  97. <div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
  98. <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
  99. <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
  100. <div id="total"></div>
  101. </div>
  102. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
  103. </script> 
  104. <script type="text/javascript"> 
  105.  
  106. </script> 
  107. </body>
  108. </html>

Etiquetas: api, google, maps, ruta
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:55.