Tema: geolocalizacion de una ruta con waypoint api de google maps
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 11/05/2015, 12:42
cmelgarejo
 
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>