javascript - ruta - ¿El rastreador GPS en tiempo real en JUST HTML/JS y Google Maps se puede ejecutar en un teléfono móvil? ¿Es posible?

marcar puntos en google maps api

Question

He leído sobre el seguimiento en tiempo real del GPS y descubrí varias cosas al respecto, la mayoría de las cuales requieren PHP, zope y una base de datos para almacenar los datos entrantes. Algunos otros métodos usan ajax con las relaciones con PHP.

En lo que respecta a mi pregunta, ¿es posible hacerlo con solo html y JS, usando marcadores o cualquier otra cosa para rellenar el mapa de Google cuando te mudes a cualquier parte de la ciudad? Necesito ayuda con esto, gracias!

Answer 1

Sí, es posible. La mayoría de los navegadores de los últimos teléfonos inteligentes implementaron la API de geolocalización W3C :

La API de geolocalización define una interfaz de alto nivel para la información de ubicación asociada solo al dispositivo que aloja la implementación, como la latitud y la longitud. La API en sí es independiente de las fuentes de información de ubicación subyacentes. Las fuentes comunes de información de ubicación incluyen el Sistema de Posicionamiento Global (GPS) y la ubicación deducida de las señales de red como direcciones IP, RFID, WiFi y Bluetooth MAC, y las ID de las celdas GSM / CDMA, así como la entrada del usuario. No se otorga ninguna garantía de que la API devuelva la ubicación real del dispositivo.

La API está diseñada para permitir tanto solicitudes de posición "one-shot" como actualizaciones de posición repetidas, así como la capacidad de consultar explícitamente las posiciones en caché.

Usar la API de geolocalización para trazar un punto en Google Maps se verá más o menos así:

if (navigator.geolocation) { 
  navigator.geolocation.getCurrentPosition(function(position) {  

    var point = new google.maps.LatLng(position.coords.latitude, 
                                       position.coords.longitude);

    // Initialize the Google Maps API v3
    var map = new google.maps.Map(document.getElementById(''map''), {
       zoom: 15,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Place a marker
    new google.maps.Marker({
      position: point,
      map: map
    });
  }); 
} 
else {
  alert(''W3C Geolocation API is not available'');
} 

Lo anterior solo reunirá la posición una vez y no se actualizará automáticamente cuando comiences a moverte. Para manejar eso, necesitaría mantener una referencia a su marcador, llamar periódicamente al método getCurrentPosition() y mover el marcador a las nuevas coordenadas. El código podría verse más o menos así:

// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById(''map''), {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = null;

function autoUpdate() {
  navigator.geolocation.getCurrentPosition(function(position) {  
    var newPoint = new google.maps.LatLng(position.coords.latitude, 
                                          position.coords.longitude);

    if (marker) {
      // Marker already created - Move it
      marker.setPosition(newPoint);
    }
    else {
      // Marker does not exist - Create it
      marker = new google.maps.Marker({
        position: newPoint,
        map: map
      });
    }

    // Center the map on the new position
    map.setCenter(newPoint);
  }); 

  // Call the autoUpdate() function every 5 seconds
  setTimeout(autoUpdate, 5000);
}

autoUpdate();

Ahora bien, si rastreando significa que también debe almacenar esta información en un servidor (para que otra persona pueda verlo moverse desde una ubicación remota), entonces deberá enviar los puntos a un script del lado del servidor usando AJAX.

Además, asegúrese de que los Términos de uso de la API de Google Maps permitan este uso antes de participar en dicho proyecto.

ACTUALIZACIÓN: La API de geolocalización W3C expone un método watchPosition() que se puede utilizar en lugar del mecanismo setTimeout() que utilizamos en el ejemplo anterior.