Descarga Web GPS Template - Descarga de código fuente Web GPS Template

Web GPS Template

Datos del sitio web

1.0.0

Descargar

Plantilla-GPS-web

¿Planea crear una aplicación híbrida? ¿Planeas usar un GPS en él? ¡Entonces esta plantilla es para ti!

Páginas para editar:

marcador.js -> mantiene los marcadores dentro del mapa
nav-dialogs.js -> contiene los métodos utilizados por la plantilla del cajón (barra lateral)
info.js -> contiene los métodos que utilizaron los eventos cuando el usuario hace clic o toca el marcador dentro del mapa
Navigation.js -> controla el cuadro de diálogo que utiliza la aplicación
main.css -> diseño de esta página
templates.css -> algunas opciones de diseño (color de fondo) que comparten index.html y esta página

La carpeta de la interfaz web se crea automáticamente mediante el complemento qgis2web de qgis. Si crea un nuevo mapa y utiliza el complemento qgis2web, esta plantilla es muy compatible. Aunque hice algunos cambios dentro de qgis2web.js para atender el modo manual (configurar las coordenadas GPS manualmente), téngalo en cuenta al cambiar el contenido de la interfaz web.

Esta plantilla no busca ni compara ubicaciones de coordenadas, pero puedes crear la tuya propia. Simplemente use estos métodos de Javascript para obtener su ubicación actual.

Métodos y variables de JavaScript notables a utilizar:

geolocation.getPosition() -> Este método proporciona la ubicación GPS actual del usuario
externalGeoLocate() -> Actualiza la ubicación GPS actual del usuario
manualcoords -> Sus coordenadas GPS configuradas manualmente. Llame solo a esta variable si el modo manual está configurado en verdadero

Creo que OpenLayers (el que hizo posible esta plantilla) tiene su propio método para comparar coordenadas, ¡tú también puedes usarlo!

Códigos de muestra para comparar y buscar coordenadas

  if ( typeof ( geolocation . getPosition ( ) ) === "undefined" && manualmode == false ) {
    return false ;
  }

  if ( manualmode ) {
    coords = manualcoords ;
  }
  else {
    coords = geolocation . getPosition ( ) ;
  }
  
  // Assume that we have a list of coordinates (objects that contain
  // x and y values). We compare each one of them using the classic
  // formula of [distance between two points]
  // (http://www.mathwarehouse.com/algebra/distance_formula/index.php) 
  // then push it to an array called selected
  for ( var i = 0 ; i < list . length ; i ++ ) {
    var icon = list [ i ] ;
    var dist = Math . sqrt ( Math . pow ( ( coords [ 0 ] - icon . x ) , 2 ) + Math . pow ( ( coords [ 1 ] - icon . y ) , 2 ) ) ;
    
    // If distance is close to the 2500m radius, then it is included
    if ( dist <= 2500 ) {
      selected . push ( icon ) ;
    }
  }