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 9 meses, 2 semanas .

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.



      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



      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.



      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 12 meses by  fmoris.

      Citar

    • This reply was modified 12 meses 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">



      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 ?



      Citar

    #2704

    fmoris
    Participant

    Sin ocupar un dispositivo


      Citar

    #2788

    No te he entendido esto último :(



      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?



      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.

  • PhoneGap Spain

    PhoneGap Spain es una comunidad online compuesta por usuarios amantes del framework PhoneGap. Esta iniciativa viene prácticamente forzada gracias al gran boom que ha ocasionado en el sector de programación móvil el fenómeno PhoneGap, con el que puedes generar aplicaciones móviles para diferentes sistemas operativos sin tener que realizar grandes cambios de una versión a otra.

    www.phonegapspain.com

  • Colabora con nosotros

    Tu nombre (requerido)

    Tu Email (requerido)

    Tu Mensaje

  • Nuestro Twitter

    "Buscas trabajo? Quieres ofertar un puesto? Entra en http://t.co/AghNBi3ePK, te será de gran ayuda! #Empleo #job #jobsearch #Phonegap"
    about 1 hour ago
    5 hours ago
    "Blog: "Guía de estilos para las #app de #FirefoxOS" http://t.co/XPiK9zqGg5 http://t.co/tsAa8xH6yP #FirefoxOS #phonegap #html5 @firefox"
    9 hours ago
  • Encuéntranos en:


    Para cualquier duda sobre el funcionamiento de la plataforma, o para sugerir alguna mejora puedes ponerte en contacto con el Administrador mediante el siguiente formulario o enviando un email a contacto@phonegapspain.com

  • Translator

    EnglishFrenchGermanItalianPortugueseRussianSpanish

Patrocinadores

Cero y Uno Logo

Colaboradores

Adobe Logo Video2Brain Logo