Home Forums PhoneGap Generar ruta con gmaps.js

This topic contains 19 replies, has 5 voices, and was last updated by alejandro giraldo duque alejandro giraldo duque 6 meses, 1 semana .

Viendo 15 respuestas - de la 1 a 15 (de 20 en total)
  • Autor
    Intervenciones
  • #2548

    fmoris
    Participant

    Buenas, estoy integrando google maps a mi proyecto, lo cual carga y se muestra sin problemas y puedo generar una ruta indicando el destino con numeros, pero cuando quiero que el destino sea una variable no me funciona, en la funcion que estoy ocupando recibo bien las coordenadas ya que me las muestra en un alert.
    Pego mi codigo

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.

    function mapa(latitud, longitud){
      alert("Recibiendo\nLATITUD: "+latitud+"\nLONGITUD:"+longitud);
    var map;
    map = new GMaps({
      div: '#mimapa',
      lat: -36.843877,
      lng: -73.095742
    });
    GMaps.geolocate({
      success: function(position) {    
        alert("GeoLocalizando");
        alert("DESDE\nLATITUD: "+position.coords.latitude+"\nLONGITUD: "+position.coords.longitude+"\nHACIA\nLatitud: "+latitud+"\nlongitud: "+longitud);
        map.setCenter(position.coords.latitude, position.coords.longitude);    
        //---------------------RUTA---------------
          map.travelRoute({
          origin: [position.coords.latitude, position.coords.longitude],  
          destination: [latitud, longitud],
         //destination: [-36.840288, -73.103285],
          travelMode: 'driving',
          step: function(e) {
            $('#instructions').append('<li>'+e.instructions+'</li>');
            $('#instructions li:eq(' + e.step_number + ')').delay(450 * e.step_number).fadeIn(200, function() {
               map.drawPolyline({
               path: e.path,
               strokeColor: '#131540',
                strokeOpacity: 0.6,
                strokeWeight: 6
                                });  
                                                                                                              });
                            }
                          });


      Citar

    #2563

    Buenas, deja que le de una vuelta, tengo un proyecto que también necesita mapas de google, pero no solo necesita inicio y fin de ruta, sino poder hacer una ruta de varios puntos.


    http://www.phonegapspain.com
    Twitter: @JoseJ_PR @phonegapspain
    Mi Linkedin: http://lnkd.in/mnASqt


      Citar

    #2579

    fmoris
    Participant

    vale , gracias que todavía no puedo solucionarlo


      Citar

    #2581

    fmoris, he puesto dos input type text, y en ellos la lat y lng y en la función de gmap esto y me ha funcionado ;)

    1.  origin: [$("#lat-o").val(), $("#lng-o").val()],

    Intenta de esa forma, ya que necesita jquery vamos a utilizarlo ;)

    Espero te sea de ayuda


    http://www.phonegapspain.com
    Twitter: @JoseJ_PR @phonegapspain
    Mi Linkedin: http://lnkd.in/mnASqt


      Citar

    #2582

    fmoris
    Participant

    Ok, intentare, discupla pero que significa -o¿

    te cuento como me va, gracias


      Citar

    #2583

    -o no significa nada jajaj es el id que le he puesto a los input.


    http://www.phonegapspain.com
    Twitter: @JoseJ_PR @phonegapspain
    Mi Linkedin: http://lnkd.in/mnASqt


      Citar

    #2584

    fmoris
    Participant

    jaja si me di cuenta despues, mira estoy tratando de hacer como me dijiste pero no me quiere funcionar, otra vez hago un alert para ver los datos y me los muestra bien pero al ponerlos en el destino no funciona te pego el codigo.

    LINEAS 19 y 25

    HTML

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.

    <div data-role="content">
          <h2>Como Llegar</h2>
          <div id="mimapa">MAPA</div>
          <div id="instructions">INSTRUCCIONES</div>
          <p id="geolocation">Buscando su ubicación...</p>
          <input type="number" value="" id="lati">
          <input type="number" value="" id="longi">
        </div>

    JS

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.
    47.
    48.
    49.
    50.
    51.
    52.
    53.
    54.
    55.
    56.
    57.

    //----------------MAPA-----------------//
    function mapa(latitud, longitud){  
    var map;
    var la = parseFloat(latitud);
    var lo = parseFloat(longitud);
    alert("Recibiendo\nLATITUD: "+la+"\nLONGITUD:"+lo);
    map = new GMaps({
      div: '#mimapa',
      lat: -36.843877,
      lng: -73.095742,
      panControl: false,
      controltype: 'small'
    });
    GMaps.geolocate({
      success: function(position) {    
        alert("GeoLocalizando\nDESDE\nLATITUD: "+position.coords.latitude+"\nLONGITUD: "+position.coords.longitude+"\nHACIA\nLatitud: "+la+"\nlongitud: "+lo);
        document.getElementById('lati').value = latitud;
        document.getElementById('longi').value = longitud;
        alert("lati: "+$("#lati").val()+"\nlongi: "+$("#longi").val());
        map.setCenter(position.coords.latitude, position.coords.longitude);    
        //---------------------RUTA---------------
          map.travelRoute({
         //origin: [position.coords.latitude, position.coords.longitude],  
          origin: [position.coords.latitude, position.coords.longitude],
          destination: [$("#lati").val(), $("#longi").val()],      
        //destination: [-36.840288, -73.103285],
         //origin: [$("#lat-o").val(), $("#lng-o").val()],
          travelMode: 'driving',
          step: function(e) {
            $('#instructions').append('<li>'+e.instructions+'</li>');
            $('#instructions li:eq(' + e.step_number + ')').delay(450 * e.step_number).fadeIn(200, function() {
               map.drawPolyline({
               path: e.path,
               strokeColor: '#131540',
                strokeOpacity: 0.6,
                strokeWeight: 6
                                });  
                                                                                                              });
                            }
                          });
    //-------------Marca la ubicacion--------------------//
          map.addMarker({
          lat: position.coords.latitude,
          lng: position.coords.longitude,
          title: 'Estoy aqui',
            click: function(e) {
              alert('Estoy Aqui');
              }
    });  
    map.addMarker({
          lat: $("#lati").val(),
          lng: $("#longi").val(),
          title: 'Destino',
            click: function(e) {
              alert('Destino');
              }
    });

    • This reply was modified 8 meses, 3 semanas by  fmoris.

      Citar

    • This reply was modified 8 meses, 3 semanas by  fmoris.
    #2589

    Buenos días. Lo primero de todo recuerda que tienes que incorporar Jquery, ojo no jquerymobile sino JQuery. ;)

    Pon estas cajas

     Code: arbitrary (select
    1.
    2.

    <input type="number" value="-12.043333" id="lati">
    <input type="number" value="-77.028333" id="long">


    http://www.phonegapspain.com
    Twitter: @JoseJ_PR @phonegapspain
    Mi Linkedin: http://lnkd.in/mnASqt


      Citar

    #2618

    fmoris
    Participant

    José, muchas gracias a ti pude identificar el problema , era que estaba obteniendo mal las coordenadas ya que usaba el google maps antiguo y esas coordenadas no son las mismas que el nuevo google maps, la pregunta ahora como podría de una forma fácil obtener las coordenadas


      Citar

    #2642

    Te refieres a las coordenadas en las que se encuentra el dispositivo en ese momento ?


    http://www.phonegapspain.com
    Twitter: @JoseJ_PR @phonegapspain
    Mi Linkedin: http://lnkd.in/mnASqt


      Citar

    #2704

    fmoris
    Participant

    Sin ocupar un dispositivo


      Citar

    #2788

    No te he entendido esto último :(


    http://www.phonegapspain.com
    Twitter: @JoseJ_PR @phonegapspain
    Mi Linkedin: http://lnkd.in/mnASqt


      Citar

    #2790

    fmoris
    Participant

    a que necesito una forma fácil que el cliente sepa sus coordenadas para que pueda ingresarlas a un formulario, desde un computador no desde un dispositivo movil


      Citar

    #2793

    Pero que las coordenadas las obtenga desde el dispositivo móvil?


    http://www.phonegapspain.com
    Twitter: @JoseJ_PR @phonegapspain
    Mi Linkedin: http://lnkd.in/mnASqt


      Citar

    #3300

    Miguel Machado
    Participant

    Perdonad que me meta en medio, dais miedo del nivel que tenéis. Yo también estoy transteando con gmaps.js y jquery mobile, y me encuentro con el problema, del que ya habéis tratado en otro sitio, de que al cargar la página en donde está el identificador del mapa, se carga solo en parte. En esa otra respuesta poníais un enlace al api de google maps y una línea de código para el archivo XML. Pregunta:¿ Puede hacer que se vea completo sin el enlace al XML? Es por verlo según estas programando. Por otro lado, las dimesiones del mapa están en el propio script de gmaps.js, y no me entran en porcentanjes relativos(%), tengo que indicar un alto y un ancho concretos. ¿Se puede sacar el tamaño del mapa al CSS?. No se si he logrado explicarme.

    Un saludo.


      Citar

Viendo 15 respuestas - de la 1 a 15 (de 20 en total)

You must be logged in to reply to this topic.

  • Calendario

    << Abr 2014 >>
    LMMJVSD
    31 1 2 3 4 5 6
    7 8 9 10 11 12 13
    14 15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30 1 2 3 4
  • PhoneGap Spain

  • Translator

    EnglishFrenchGermanItalianPortugueseRussianSpanish