Download Web GPS Template - Download des Quellcodes Web GPS Template

Web GPS Template

Website-Daten

1.0.0

Herunterladen

Web-GPS-Vorlage

Planen Sie die Erstellung einer Hybrid-App? Planen Sie die Verwendung eines GPS darin? Dann ist diese Vorlage genau das Richtige für Sie!

Zu bearbeitende Seiten:

marker.js -> enthält die Markierungen innerhalb der Karte
nav-dialogs.js -> enthält die von der Schubladenvorlage verwendeten Methoden (Seitenleiste)
info.js -> enthält die Methoden, die die Ereignisse verwenden, wenn der Benutzer auf die Markierung in der Karte klickt oder darauf tippt
navigation.js -> steuert das Dialogfeld, das von der App verwendet wird
main.css -> Layout dieser Seite
templates.css -> einige Designoptionen (Hintergrundfarbe), die sowohl index.html als auch diese Seite gemeinsam haben

Der Webinterface-Ordner wird automatisch vom qgis2web-Plug-in von qgis erstellt. Wenn Sie eine neue Karte erstellen und das qgis2web-Plugin verwenden, ist diese Vorlage sehr kompatibel. Obwohl ich einige Änderungen in qgis2web.js vorgenommen habe, um den manuellen Modus (manuelles Festlegen der GPS-Koordinaten) zu ermöglichen, sollten Sie dies beim Ändern des Webinterface-Inhalts im Hinterkopf behalten.

Diese Vorlage sucht oder vergleicht keine Koordinatenstandorte, aber Sie können Ihre eigene Vorlage erstellen. Verwenden Sie einfach diese Javascript-Methoden, um Ihren aktuellen Standort zu ermitteln.

Bemerkenswerte zu verwendende JavaScript-Methoden und -Variablen:

geolocation.getPosition() -> Diese Methode gibt den aktuellen GPS-Standort des Benutzers an
externalGeoLocate() -> Aktualisiert den aktuellen GPS-Standort des Benutzers
manuelle Koordinaten -> Ihre manuell eingestellten GPS-Koordinaten. Rufen Sie diese Variable nur auf, wenn „manualmode“ auf „true“ gesetzt ist

Ich denke, OpenLayers (das diese Vorlage ermöglicht hat) hat eine eigene Methode zum Vergleichen von Koordinaten, die können Sie auch verwenden!

Beispielcodes zum Vergleichen und Suchen von Koordinaten

  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 ) ;
    }
  }