Foro

Home Forums PhoneGap GEOLOCALIZACION INVERSA EN PHONEGAP ¿POSIBLE?

This topic contains 17 replies, has 9 voices, and was last updated by GastonCancino GastonCancino 4 años .

Viendo 15 respuestas - de la 1 a 15 (de 18 en total)
  • GEOLOCALIZACION INVERSA EN PHONEGAP ¿POSIBLE?

    Intervenciones
  • invader
    invader 
    Participant

    Hola comunidad.

    Soy nuevo en esta interesante comunidad y espero verla crecer para que nos aporte sabiduria, además de intentar aportar lo posible para que todo el mundo pueda disfrutar creando aplicaciones con esta tecnologia.

    Al igual que soy nuevo en esta comunidad, tambien lo soy en el mundo de la programación. Teniendo en cuenta esto, queda claro la multitud de dudas y preguntas que surgen al plantear la idea de crear una aplicación “mobile… (of course!)”. :lol:

    Vamos al grano…
    GEOLOCALIZACION INVERSA

    Lo que tengo en mente es, por decirlo de alguna manera, geolocalizar todos los dispositivos que se instalen la aplicación y poder hacer un seguimiento de cada dispositivo concreto. 8-O :roll: :lol: …como te quedas?? ..si lo se!! se me ha encendido la :idea:

    Apartir de este codigo de geolocalización:

     Code: geolocalizacion (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.

    function irMapa() {
      cargarPagina("mapa", "Mapa", function() {
        var opciones = {
              center: new google.maps.LatLng(38.966321, -0.585770),
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var mapa = new google.maps.Map(document.getElementById("mapa"),
          opciones);
          
        var marcadorLugar = new google.maps.Marker({
             position: new google.maps.LatLng(38.966321, -0.585060),
             map: mapa,
              title:"Punto fijo"
          });  
        
        navigator.geolocation.getCurrentPosition(function(posicion) {
          var marcadorUsuario = new google.maps.Marker({
            position: new google.maps.LatLng(posicion.coords.latitude,
              posicion.coords.longitud),
            map: mapa,
            title:"Posición del Usuario"
            });  
        }, function() {
          navigator.notification.alert("No te hemos podido ubicar","Geolocalización");  
        });
      });  
    }

    function cargarPagina(plantilla, titulo, callback) {
      $("h1").html(titulo);
      $.get("plantillas/" + plantilla + ".html", function(htmlPlantilla) {
        $("#contenido").html(htmlPlantilla);  
        if (callback!=undefined) {
          callback();  
        }
      }, "text")
    }

    Aqui deberia obtener la posicion del usuario además de un punto fijo. Lamentablemente solo me devuelve la posición del punto fijo y estoy intentando solucionar que aparezca tambien la posicion del usuario.

    Llegados a este punto, me planteo la idea de poder leer los datos de posicion y mandarlos a algun sitio donde generar otro mapa con todos los dispositivos que esten conectados en ese momento desde la alicación, pudiendo diferenciarlos con algun indicador. Desde aquí las posibilidades que se me ocurren son muy muy muy interesantes.

    Desde luego que esto que intento hacer, ya está hecho. Lo usan aplicaciones para ver cuanta gente esta cerca e interactuar con ella.

    A ver si alguien me puede iluminar o indicarme por donde puedo comenzar. Gracias de antemano..


    jcesarmobile 
    Participant

    geolocacización inversa es que a partir de unas coordenadas, sacar una dirección fisica (calle, ciudad, provincia, pais), se puede hacer con la API de google maps sin problemas.

    De todas formas tu problema parece ser que directamente no obtienes las coordenadas, has añadido el plugin de geolocation?

    1.  cordova plugin add org.apache.cordova.geolocation


    Twitter: https://twitter.com/jcesarmobile
    Tutoriales e información sobre phonegap: http://www.phonegap.es/
    Stack Overflow en Español: http://es.stackoverflow.com/


    invader
    invader 
    Participant

    Gracias por resonder tan rapido jcesar.

    La verdad que estoy dudando con la carga del plugin, pero el plugin de geolocalizació en mi config.xml parece correcto, al instalar la app me pide que acepte los permisos entre ellos el de ubicación.

     Code: confix.xml (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.

    <?xml version="1.0" encoding="utf-8"?>

      <widget xmlns = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.PONJAX.app"
                    version   = "1.0.0">
        
        <preference name="android-installLocation" value="preferExternal" />
        <preference name="fullscreen" value="false" />
        <preference name="target-device" value="universal" />
        <preference name="orientation" value="default" />
        <preference name="phonegap-version" value="2.9.0" />

        <name>PONJAX</name>
        <description>geolocation.</description>
        <author email="info@gmail.com">Invader</author>
        
        <access origin="*"  subdomains="true"/>
        
        <gap:platforms><gap:platform name="android" minVersion="2.1" /></gap:platforms>
        
        <icon src="img/icono.png" />
        
        <gap:splash src="res/screen/android/screen-ldpi-portrait.jpg"  gap:platform="android" gap:density="ldpi" />
        <gap:splash src="res/screen/android/screen-mdpi-portrait.jpg"  gap:platform="android" gap:density="mdpi" />
        <gap:splash src="res/screen/android/screen-hdpi-portrait.jpg"  gap:platform="android" gap:density="hdpi" />
        <gap:splash src="res/screen/android/screen-xhdpi-portrait.jpg" gap:platform="android" gap:density="xhdpi" />
        
        <plugin name="Geolocation" value="org.apache.cordova.GeoBroker" />
        
        <feature name="http://api.phonegap.com/1.0/battery"/>
                    <feature name="http://api.phonegap.com/1.0/geolocation"/>
                    <feature name="http://api.phonegap.com/1.0/network"/>
                    <feature name="http://api.phonegap.com/1.0/camera"/>
                    <feature name="http://api.phonegap.com/1.0/contacts"/>
                    <feature name="http://api.phonegap.com/1.0/file"/>
                    <feature name="http://api.phonegap.com/1.0/media"/>
                    <feature name="http://api.phonegap.com/1.0/notification"/>
                    <feature name="http://api.phonegap.com/1.0/device"/>

      </widget>

    Al indicarme en tu respuesta lo del plugin he añadido esta ultima linea por si no tenia el plugin cargado a la hora de compilar (compilo con el Build de Adobe)
    1.  <plugin name="Geolocation" value="org.apache.cordova.GeoBroker" />
    Pero el resultado el mismo, no me dio error al compilar pero no aparece mi posición en el mapa aunque si la del punto fijo.

    Seguiremos intentandolo…


    ferminako
    ferminako 
    Participant

    supongo que todo esto es para una app de localiza a tus amigos etc no???? el tema me parece curioso :D


    invader
    invader 
    Participant

    Si ferminako, como ya digo, las aplicaciones derivadas de esto que planteo, pueden aportar un sinfin de utilidades, como tu comentas, podrias localizar a tus amigos (los que esten conectados a la aplicación) saber su posición exacta.

    Tambien surge la idea de crear juegos en los que por ejemplo uno de los usuarios al azar (siempre que esté conectado) pueda convertirse en la “presa” y el resto de usuarios-jugadores son los “cazadores”, llegando a puntuar cuando se detecte que los 2 dispositivos estan a una distancia determinada, como 2 o 3 metros.

    Yo me imagino a mucha gente con la aplicacion instalada y por ejemplo en un centro comercial la enciendes, te conectas a una partida y puede que en el mismo centro comercial alguien este jugando y lo encuentres, podrias hablar con el y decirle, Te he cazado!!! :-D podrias no decirle nada y verias como mira a su alrrededor intentando encontrarte.. jajajajaj

    ….el problema es que ahora mismo estoy empezando y seguro que para llegar a ese nivel voy a sudar tinta… de momento con lo que tenia en principio y googleando he podido ver mi posición en el mapa con esto.

     Code: geolocalizacion.js (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.
    58.
    59.
    60.
    61.
    62.
    63.
    64.
    65.
    66.
    67.
    68.
    69.
    70.
    71.

    (function($){
      var registrandoPosicion = false,
        idRegistroPosicion,
        ultimaPosicionUsuario,
        marcadorUsuario,
        mapa,
        div = document.getElementById('mapa');
      
      mapa = new google.maps.Map(div, {
        zoom : 40,
        center: new google.maps.LatLng(0,0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      function registrarPosicion() {
        if (registrandoPosicion){
          registrandoPosicion = false;
          navigator.geolocation.clearWatch(idRegistroPosicion);
          limpiarUbicacion();
        }
        else {
          idRegistroPosicion = navigator.geolocation.watchPosition(
            exitoRegistroPosicion,
            falloRegistroPosicion,
            {
              enableHighAccuracy : true,
              maximumAge : 30000,
              timeout : 27000
            }
          );
        }
      }

      <!--Reaccionando solo si el usuario se ha movido "X" Metros-->
      function exitoRegistroPosicion(position) {
        if (!registrandoPosicion) { // Es la primera vez
          registrandoPosicion = true;
          ultimaPosicionUsuario = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
          marcadorUsuario = new google.maps.Marker({
            position : ultimaPosicionUsuario,
            map : mapa
          });
        }
        else {        
          var posicionActual = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
          if (google.maps.geometry.spherical.computeDistanceBetween(posicionActual, ultimaPosicionUsuario) > 1){ // Metros
            ultimaPosicionUsuario = posicionActual;
            marcadorUsuario.setPosition(posicionActual);
          }
        }
        mapa.panTo(ultimaPosicionUsuario);
      }

      function falloRegistroPosicion() {
        alert('No se pudo determinar la ubicación');
        limpiarUbicacion();
      }

      function limpiarUbicacion() {
        ultimaPosicionUsuario = new google.maps.LatLng(0,0);
                    if (marcadorUsuario){
                           marcadorUsuario.setMap(null);
                           marcadorUsuario = null;
                   }
      }

      $('#localizar').on('click',function(e){
        e.preventDefault();
        registrarPosicion();
      });
    })(jQuery);

    Por otra parte este es el index

     Code: index.html (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.

    <!DOCTYPE html>
    <html>
        <head>
            <title>Geolocalizar mi posición</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
            <script src="js/cordova.js"></script>
            <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
            <script src="js/jquery.mobile-1.2.1.min.js"></script>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <link rel="stylesheet" href="css/jquery.mobile-1.2.1.min.css" />
        </head>
        <body>
            <div id="" data-role="page">
                <div data-role="header">
                    <h1>Geolocalizandome</h1>
                </div>
                <div data-role="content">
                    <p>Localizar mi posición</p>
                    <div id="mapa" style="margin:20px 0; height:300px; border:1px solid black;"></div>
                    <div id="boton">
                        <a href="#">Localízame...</a>
                    </div>
                </div>
                <div data-role="footer" data-position="fixed">
                    <h2>Próximo menú</h2>
                </div>
            </div>
            <script type="text/javascript" src="js/geolocalizacion.js"></script>
        </body>
    </html>

    El script con el codigo de geolocalizacion lo coloco abajo ya que estando arriba no funciona.

    El config.xml con los permisos activados y los plugins, compilado en el Build de Adobe y funcionando en dispositivo Android 2.2

     Code: config.xml (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.

    <?xml version="1.0" encoding="utf-8"?>

      <widget xmlns = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.PONJAX.app"
                    version   = "1.0.0">
        
        <preference name="android-installLocation" value="preferExternal" /><!--android value="auto-preferExternal"-->
        <preference name="fullscreen" value="false" />
        <preference name="target-device" value="universal" />
        <preference name="orientation" value="default" />
        <preference name="phonegap-version" value="2.9.0" />

        <name>PONJAX</name>
        <description>geolocation.</description>
        <author email="info@gmail.com">Invader</author>
        
        <access origin="*"  subdomains="true"/>
        
        <gap:platforms><gap:platform name="android" minVersion="2.1" /></gap:platforms>
        
        <icon src="img/icono.png" />
        
        <gap:splash src="res/screen/android/screen-ldpi-portrait.jpg"  gap:platform="android" gap:density="ldpi" />
        <gap:splash src="res/screen/android/screen-mdpi-portrait.jpg"  gap:platform="android" gap:density="mdpi" />
        <gap:splash src="res/screen/android/screen-hdpi-portrait.jpg"  gap:platform="android" gap:density="hdpi" />
        <gap:splash src="res/screen/android/screen-xhdpi-portrait.jpg" gap:platform="android" gap:density="xhdpi" />
        
        <plugin name="Accelerometer" value="org.apache.cordova.AccelListener" />
        <plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
        <plugin name="Capture" value="org.apache.cordova.Capture"/>
        <plugin name="Compass" value="org.apache.cordova.CompassListener" />
        <plugin name="Contacts" value="org.apache.cordova.ContactManager" />
        <plugin name="Device" value="org.apache.cordova.Device" />
        <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager" />        
        <plugin name="Battery" value="org.apache.cordova.BatteryListener" />
        <plugin name="File" value="org.apache.cordova.FileUtils" />
        <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer" />
        <plugin name="Geolocation" value="org.apache.cordova.GeoBroker" />
        <plugin name="Globalization" value="org.apache.cordova.Globalization" />        
        <plugin name="Media" value="org.apache.cordova.AudioHandler" />
        <plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
        <plugin name="Notification" value="org.apache.cordova.Notification"/>
        <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
        <plugin name="Storage" value="org.apache.cordova.Storage" />
          
        <plugin name="BarcodeScanner" /> <!-- latest release -->
        <plugin name="Analytics" /> <!-- latest release -->
        <plugin name="GenericPush" /> <!-- latest release -->  

      </widget>

    los proximos pasos creo que deberian ser.

    Recoger los datos de la posicion y arreglarlos incluyendo un identificador unico para poder mandarlos a una base de datos y poder recuperarlos despues.

    En la base de datos deberian poderse grabar todas las posiciones para poder hacer un historico y poder visualizar determinado recorrido por fecha por ejemplo.

    Tambien deberiamos poder recuperar de la base de datos la ultima posición de cada usuario para mostrarlo en un mapa general con todos los usuarios conectados..

    Si alguien puede aportar luz a esto que planteo seria muy de agradecer.


    invader
    invader 
    Participant

    jcesar te agradezco mucho la referencia a la API de google maps de geolocalización inversa.. :wink:

    He estado trasteando con el API de google maps y parece que la cosa va por buen camino, me explico.

    Insertamos unas coordenadas que abarquen la zona de acción, (seria interesante que las recogiera del dispositivo, aun no me he puesto con ello). Le indicamos el div contenedor del mapa con id=”map-canvas”.

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.

    var geocoder;
                   var map;
                   var infowindow = new google.maps.InfoWindow();

                   google.maps.event.addDomListener(window, 'load', initialize);
          
                   function initialize() {
                geocoder = new google.maps.Geocoder();
          var latlng = new google.maps.LatLng(38.96130,-0.583331);
          var mapOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: 'roadmap'
          }
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

    En esta función recogemos del parrafo “geolocation” las coordenadas del usuario de forma inversa y parseamos las coordenadas para que nos diga la dirección del usuario.

     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.

    function codeLatLng() {
          var input = document.getElementById('geolocation').innerHTML;
          var latlngStr = input.split(',', 2);
          var lat = parseFloat(latlngStr[0]);
          var lng = parseFloat(latlngStr[1]);
          var latlng = new google.maps.LatLng(lat, lng);
          geocoder.geocode({'latLng': latlng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              if (results[1]) {                                        
                map.setZoom(17);
                infowindow.setContent(results[1].formatted_address);
                infowindow.open(map, marcadorUsuario);
              }
              else {
                navigator.notification.alert('No ha encontrado resultados');
              }
            }
            else {
              navigator.notification.alert('Ningún resultado encontrado: ' + status);
            }
          });
        }

    He puesto un refresco para que me siga el cartelito

    1.  setInterval(codeLatLng,5000);

    Ahora registramos la posición del usuario

     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.

    var registrandoPosicion = false,
                idRegistroPosicion,
                ultimaPosicionUsuario,
                marcadorUsuario,
                div = document.getElementById('map-canvas');
        
                function registrarPosicion() {
                    if (registrandoPosicion){
                        registrandoPosicion = false;
                        navigator.geolocation.clearWatch(idRegistroPosicion);
                        limpiarUbicacion();
                    }
                    else {
                        idRegistroPosicion = navigator.geolocation.watchPosition(
                            exitoRegistroPosicion,
                            falloRegistroPosicion,
                            {
                                enableHighAccuracy : true,
                                maximumAge : 30000,
                                timeout : 30000
                            }
                        );
                    }
                }

    Si recibe datos de posición, recogemos la ultima, creamos el marcador del usuario y centramos el marcador en la última posición la revisamos y le indicamos la distancia en metros (2 en este caso) de variación para que reconozca que se ha movido (esta linea de codigo me da un error en la consola):mrgreen: . Igualamos la última posicion a la posición actual y colocamos el marcador en la posición actual.

    Enviamos el centro del mapa a la ultima posición reconocida por el dispositivo, que ahora es la posicion actual e iniciamos la lectura de coordenadas del dispositivo.

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.

    function exitoRegistroPosicion(position) {
                    if (!registrandoPosicion) {
                        registrandoPosicion = true;        
                        ultimaPosicionUsuario = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                        marcadorUsuario = new google.maps.Marker({
                            position : ultimaPosicionUsuario,
                            map : map
                        });
                    }
                    else {        
                        var posicionActual = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                        if (google.maps.geometry.spherical.computeDistanceBetween(posicionActual, ultimaPosicionUsuario) < 2){
                            ultimaPosicionUsuario = posicionActual;
                            marcadorUsuario.setPosition(posicionActual);
                        }
                    }
            map.panTo(ultimaPosicionUsuario);
            navigator.geolocation.getCurrentPosition(onSuccess, onError);
                }

    Ponemos las funciones del fallo del registro de posición y de limpiar ubicación y recogemos las coordenadas del dispositivo para pasarlas a la geolocalización inversa y que se muestren los cartelitos a medida que se mueve el usuario.

     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.

    function falloRegistroPosicion() {
                         navigator.notification.alert('No se pudo determinar la ubicación');
                         limpiarUbicacion();
                   }
            
                   function limpiarUbicacion() {
                       ultimaPosicionUsuario = new google.maps.LatLng(0,0);
                       if (marcadorUsuario){
                            marcadorUsuario.setMap(null);
                            marcadorUsuario = null;
                        }
                    }
          
        function onSuccess(position) {
          var element = document.getElementById('geolocation');
          element.innerHTML = position.coords.latitude + ',' + position.coords.longitude;
        }                                          
                                                                                              

        function onError(error) {
          navigator.notification.alert('code: '    + error.code    + '\n' +
                             'message: ' + error.message + '\n');
        }

    Ahora en el “body” llamamos a la función que registra la posición y el boton de momento lo dejo, me hace la función de refrescar la posición, en el parrafo con id=”geolocation” muestramos las coordenadas que recibe el dispositivo y el “div” id=”map_canvas” nos muestra toda la magia…

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

    <body id="pageGeolocation" onLoad="registrarPosicion()">
        
               <div>
          <input type="button" value="Actualizar posición" onclick="registrarPosicion()">
          <p id="geolocation"></p>
                    </div>
            
        <div id="map-canvas"></div>

      </body>

    Pido disculpas por el dolor que puede provocar en la retina de los que os pareis a mirar este codigo…
    Aquí completo:

     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.
    58.
    59.
    60.
    61.
    62.
    63.
    64.
    65.
    66.
    67.
    68.
    69.
    70.
    71.
    72.
    73.
    74.
    75.
    76.
    77.
    78.
    79.
    80.
    81.
    82.
    83.
    84.
    85.
    86.
    87.
    88.
    89.
    90.
    91.
    92.
    93.
    94.
    95.
    96.
    97.
    98.
    99.
    100.
    101.
    102.
    103.
    104.
    105.
    106.
    107.
    108.
    109.
    110.
    111.
    112.
    113.
    114.
    115.
    116.
    117.
    118.
    119.
    120.
    121.
    122.
    123.
    124.
    125.
    126.
    127.
    128.
    129.
    130.
    131.
    132.
    133.
    134.
    135.

    <!doctype html>
    <html>
      <head>
                    <meta charset="utf-8">
        <title>Reverse Geocoding</title>
                    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <script type="text/javascript" src="js/cordova.js"></script>
                    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <style>
          html, body {height: 95%; margin: 5px; padding: 0px}
          #map-canvas {height: 94%; margin: 10px; padding: 0px}
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
                    <script type="text/javascript">
            
                    var geocoder;
                    var map;
                    var infowindow = new google.maps.InfoWindow();

                   google.maps.event.addDomListener(window, 'load', initialize);
          
                            function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(38.96130,-0.583331);
            var mapOptions = {
              zoom: 15,
              center: latlng,
              mapTypeId: 'roadmap'
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          }
                
          function codeLatLng() {
            var input = document.getElementById('geolocation').innerHTML;
            var latlngStr = input.split(',', 2);
            var lat = parseFloat(latlngStr[0]);
            var lng = parseFloat(latlngStr[1]);
            var latlng = new google.maps.LatLng(lat, lng);
            geocoder.geocode({'latLng': latlng}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {                                        
                  map.setZoom(17);
                  infowindow.setContent(results[1].formatted_address);
                  infowindow.open(map, marcadorUsuario);
                }
                else {
                  navigator.notification.alert('No ha encontrado resultados');
                }
              }
              else {
                navigator.notification.alert('Ningún resultado encontrado: ' + status);
              }
            });
          }
                
          setInterval(codeLatLng,5000);
      
                var registrandoPosicion = false,
                idRegistroPosicion,
                ultimaPosicionUsuario,
                marcadorUsuario,
                div = document.getElementById('map-canvas');
        
                function registrarPosicion() {
                    if (registrandoPosicion){
                        registrandoPosicion = false;
                        navigator.geolocation.clearWatch(idRegistroPosicion);
                        limpiarUbicacion();
                    }
                    else {
                        idRegistroPosicion = navigator.geolocation.watchPosition(
                            exitoRegistroPosicion,
                            falloRegistroPosicion,
                            {
                                enableHighAccuracy : true,
                                maximumAge : 30000,
                                timeout : 30000
                            }
                        );
                    }
                }
        
                function exitoRegistroPosicion(position) {
                    if (!registrandoPosicion) {
                        registrandoPosicion = true;        
                        ultimaPosicionUsuario = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                        marcadorUsuario = new google.maps.Marker({
                            position : ultimaPosicionUsuario,
                            map : map
                        });
                    }
                    else {        
                        var posicionActual = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                        if (google.maps.geometry.spherical.computeDistanceBetween(posicionActual, ultimaPosicionUsuario) < 2){
                            ultimaPosicionUsuario = posicionActual;
                            marcadorUsuario.setPosition(posicionActual);
                        }
                    }
            map.panTo(ultimaPosicionUsuario);
            navigator.geolocation.getCurrentPosition(onSuccess, onError);
                }
        
                function falloRegistroPosicion() {
                    navigator.notification.alert('No se pudo determinar la ubicación');
                    limpiarUbicacion();
                }
            
                function limpiarUbicacion() {
                    ultimaPosicionUsuario = new google.maps.LatLng(0,0);
                    if (marcadorUsuario){
                        marcadorUsuario.setMap(null);
                        marcadorUsuario = null;
                    }
                }
          
        function onSuccess(position) {
          var element = document.getElementById('geolocation');
          element.innerHTML = position.coords.latitude + ',' + position.coords.longitude;
        }                                          
                                                                                              

        function onError(error) {
          navigator.notification.alert('code: '    + error.code    + '\n' +
                             'message: ' + error.message + '\n');
        }    
      </script>
    </head>
    <body id="pageGeolocation" onLoad="registrarPosicion()
      <div>
        <input type="button" value="Actualizar posición" onclick="registrarPosicion()">
        <p id="geolocation"></p> <!--Aqui se muestran las coordenadas que recibe el dispositivo-->
            </div>      
      <div id="map-canvas"></div>
    </body>
    </html>

    Espero sugerencias, burlas risas y demás :lol: :roll: Toda ayuda es bien recibida…


    alexis85
    alexis85 
    Participant

    Algo similar quiero hacer con la aplicacion que estoy haciendo para mi tesis. Todos lo profesionales que tengan instalado la app en sus dispositivos móviles, en alguna opción se pueda observar la ubicación de cada uno de ellos, para que cada profesional sepa quienes tienen esa app para hacer consultas de trabajo entre ellos. Aun no tengo mucha idea de como hacerlo. Pero lo ideal seria que un servidor Node.js que tenga el registro de todos los usuarios de la app permita representar las ubicaciones de todos los profesionales en sus dispositivos móviles…………. Si alguien en en esta comunidad tiene una solución a esto o similar, sería un gol de media cancha :wink:


    alexis85
    alexis85 
    Participant

    invader, encontraste alguna solución?


    invader
    invader 
    Participant

    Alexis85

    Para lo que estas intentando implementar me surgen dudas:

    Si no está nadie con la app encendida, como mucho podras rescatar de la base de datos, la última posición del dispositivo. Esto puede variar de la realidad. ya que el dispositivo puede estar en otro lugar y al no tener encendida la app, recoges la última posición del dispositivo, no la posición actual.

    A falta de conocimientos de como correr la aplicación en segundo plano, claro, esto conllevaria recibir las 24 horas del dia, la posición del dispositivo. Pero creo que empezarian los problemas de rendimiento del dispositivo. :oops:

    Por otra parte, si el usuario de la app, cuando inicia la sesion en la base de datos, esta, guarda su posición y al salir de la sesión se le indica a la base de datos que borre todas las entradas, otro usuario conectado dejará de ver el punto en el mapa, del usuario que salió de la app.

    Yo le daria una solución más simple a tu implementación alexis85, si al abrir la aplicación le indicas al usuario que rellene un formulario con la direccion, nombre y password, podras hacerte con una base de datos y saber cuantos usuarios han instalado la aplicación, al tiempo que podras representarlos en el mapa a todos, en ubicaciones que ellos mismos indican como habituales.

    :mrgreen:

    La solución está en tu mente


    alexis85
    alexis85 
    Participant

    Invader, Magnifica tu respuesta!!

    Te cuento, la app es en realidad una especie de control o historia clinica (como quieras llamarla). colocandome del lado de un medico clinico, puedo no solo guardar “localmente” el historial médico de mis pacientes, sino también podes localizar a los médicos que tengan esta app, para poder realizarles consultas o asesoramiento por “X” motivo. …… Yo si tengo la app solo cargo los datos, quedan almacenados y en un boton y opción adicional hacer lo que escribí antes. ……


    Aeon
    Aeon 
    Participant

    como dije invader a falta de poder ejecutar la app en segundo plano esta muy difícil poder tener las ubicaciones de los usuarios actualizada en todo momento, habría que pensar en otra manera de hacerlo


    drarse 
    Participant

    Las consultas deben ser en persona? Por qué no utilizar la aplicación para ello? Si el personal es del mismo centro lo que se me ocurre es o bien, que el terminal envie la posicion solo si se encuentra a menos de tantos metros de una posición o (n se si se podrá hacer) enviar un mensaje al servidor cuando se conecte a la red del centro. Tienes un problema en la privacidad si deseas hacerlo a tiempo real las 24h. Mi compañero no tiene por que saber si estuve tomando café ayer en tal sitio o me recogí la noche anterior a las 3 de la mañana (ya que el puede vigilarme todo lo que quiera). Sin hablar del grandisimo consumo de datos.


    alexis85
    alexis85 
    Participant

    Voy a ir viendo con mi compañero sobre este tema, muy interesante las opiniones de ustedes, seguramente replantearé algunas cuestiones y probar lo último que me mencionó invader!!. Si surge algo estaré comentando :wink:


    Aeon
    Aeon 
    Participant

    otra cosa que se me ocurre es que los doctores activen manualmente su ubicación(que abran la aplicación y que actualicen su ubicación, cuando estén disponibles y que la desactiven cuando no lo estén) me parece una buena posibilidad y no afectaría la privacidad y solo serian localizables cuando lo deseen


    Ros 
    Participant

    invader me parece muy interesante tu aplicación, de hecho estoy intentando hacer algo parecido, he intentando seguir tus indicaciones pero algo me falla, me podrías facilitar los archivos, por cierto has conseguido almacenar las posiciones en una base de datos? muchas gracias de antemano


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

You must be logged in to reply to this topic.

RT @PWAExpertsIO: 🎙️ Cómo capturar 🎼 audios con tu #PWA. @JoseJ_PR te enseña cómo hacerlo a través de este #tutorial👇🏼 https://t.co/Rkpw609:57 PM Jun 8th