Foros del Web » Programando para Internet » Javascript » Frameworks JS »

ruta con lineas curvas en google maps

Estas en el tema de ruta con lineas curvas en google maps en el foro de Frameworks JS en Foros del Web. buenas tengo la siguiente aplicación la cual me va creando una ruta que voy haciendo... el tema esta en que la ruta se hace perfecto ...
  #1 (permalink)  
Antiguo 07/11/2012, 12:20
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 8 años, 1 mes
Puntos: 3
Pregunta ruta con lineas curvas en google maps

buenas tengo la siguiente aplicación la cual me va creando una ruta que voy haciendo... el tema esta en que la ruta se hace perfecto y todo... pero marca una linea recta.... a mi me gustaria que esta linea sea mas gruesa y tambien q sea curva y no recta.... espero que alguien me ayude... este es mi codigo... nadie sabe?????????


Código HTML:
Ver original
  1. <meta charset="utf-8" />
  2.  <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  3. <title>Test Google Maps</title>
  4. </head>
  5.     <!-- MAPA -->
  6.     <div id="map_canvas" style="width: 600px; height: 600px;"></div>
  7.     <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
  8.    
  9.     <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
  10.     <script type="text/javascript">
  11.         function agregarCiudad(){
  12.             showAddress(document.getElementById('ciudad').value);
  13.             document.getElementById('ciudad').value = '';
  14.         }
  15.     </script>
  16.    
  17.     <script type="text/javascript">
  18.     //variables y objetos globales
  19.     var map             //mapa
  20.     var geocoder;       //geocoder
  21.     var _path = [];     // ruta
  22.     var _poliLinea = new google.maps.Polyline({ //polilinea
  23.         path: _path,
  24.         strokeColor: '#FF0000',
  25.         strokeOpacity: 1.0,
  26.         strokeWeight: 2
  27.     });
  28.  
  29.     //inicializo
  30.     initialize();
  31.  
  32.     function initialize() {
  33.         //centrado
  34.         var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
  35.         //opciones
  36.         var mapOptions = {
  37.             zoom: 1,
  38.             center: myLatLng,
  39.             mapTypeId: google.maps.MapTypeId.TERRAIN
  40.         };
  41.         //geocoder
  42.         geocoder = new google.maps.Geocoder();
  43.         //creo mapa
  44.         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  45.        
  46.         //asigno polilinea al mapa
  47.         _poliLinea.setMap(map);
  48.     }
  49.  
  50.     function showAddress(s_address) {
  51.         var address = s_address;
  52.         //busco la direccion dada
  53.         geocoder.geocode( { 'address': address}, function(results, status) {
  54.           if (status == google.maps.GeocoderStatus.OK) {
  55.             //centro el mapa en el resultado
  56.             map.setCenter(results[0].geometry.location);
  57.             //creo marcador
  58.             var marker = new google.maps.Marker({
  59.                 map: map,
  60.                 position: results[0].geometry.location
  61.             });
  62.             //agrego punto a la linea
  63.             agregarRuta(results[0].geometry.location)
  64.           } else {
  65.             alert('Error: ' + status);
  66.           }
  67.         });
  68.      }
  69.      
  70.     function agregarRuta(o_punto){
  71.         //creo punto a partir de la dirección dada
  72.         var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
  73.         //agrego el punto al array de la ruta
  74.         _path.push(o_LL);
  75.         //cargo la nueva ruta en la polilinea
  76.         _poliLinea.setPath(_path);
  77.         //centro el mapa en el último punto
  78.         map.setCenter(o_LL);
  79.         //Hago un poco de zoom
  80.         map.setZoom(6);
  81.     }
  82.     </script>
  83. </body>
  84. </html>

Última edición por maximendez88; 08/11/2012 a las 10:25
  #2 (permalink)  
Antiguo 09/11/2012, 09:56
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 8 años, 1 mes
Puntos: 3
Respuesta: ruta con lineas curvas en google maps

entonces??????????? no c a c

Última edición por maximendez88; 19/11/2012 a las 09:48

Etiquetas: curvas, funcion, google, html, input, javascript, js, lineas, 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




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