Flutter-geolocator: Holen Sie sich den Benutzerstandort über den Browser

Hallo @lionelquirynen , im Moment haben wir keine Implementierung für die Webplattform. Wir möchten dies unterstützen und sind offen für Pull Requests.

Als zukünftige Referenz sind hier zwei Artikel des Flutter-Teams, die beschreiben, wie man Web-Unterstützung zu Plugins hinzufügt:

• https://medium.com/flutter/how-to-write-a-flutter-web-plugin-5e26c689ea1
• https://medium.com/flutter/how-to-write-a-flutter-web-plugin-part-2-afdddb69ece6

@mvanbeusekom Wenn ich etwas Zeit finde, um zu lernen, wie es geht, könnte ich es versuchen. Im Moment habe ich einen Weg gefunden, dies über das js-Paket zu tun. Ich poste schnell den Code hier, falls ihn jemand sofort haben möchte:

@JS('navigator.geolocation') // navigator.geolocation namespace
library jslocation; // library name can be whatever you want

import "package:js/js.dart";

@JS('getCurrentPosition') // Accessing method getCurrentPosition from Geolocation API
external void getCurrentPosition(Function success(GeolocationPosition pos));

@JS()
<strong i="7">@anonymous</strong>
class GeolocationCoordinates {
  external double get latitude;
  external double get longitude;
  external double get altitude;
  external double get accuracy;
  external double get altitudeAccuracy;
  external double get heading;
  external double get speed;

  external factory GeolocationCoordinates(
      {double latitude,
      double longitude,
      double altitude,
      double accuracy,
      double altitudeAccuracy,
      double heading,
      double speed});
}

@JS()
<strong i="8">@anonymous</strong>
class GeolocationPosition {
  external GeolocationCoordinates get coords;

  external factory GeolocationPosition({GeolocationCoordinates coords});
}

And to call this :  

  success(pos) {
    try {
    print(pos.coords.latitude);
    print(pos.coords.longitude);
    } catch (ex) {
      print("Exception thrown : " + ex.toString());
    }
  }
  _getCurrentLocation() {
    if (kIsWeb) {
      getCurrentPosition(allowInterop((pos) => success(pos)));
    }

Sie müssen nur die Methode _getCurrentLocation aufrufen.

@lionelquirynen Kannst du deine pubspec.yaml posten? Ich versuche, die Zeile hinzuzufügen: import ' package:Shared/locationJs.dart '; wie Sie es auf stackexchange gepostet haben, aber ich erhalte Fehler. Haben Sie einen freigegebenen Ordner auf der Stammebene erstellt?

Hallo @lionelquirynen!

Zunächst möchte ich Ihnen danken, dass Sie Ihre Lösung hier gepostet haben. Ich denke, du hast vielen Menschen mit deiner Botschaft geholfen!

Allerdings hätte ich noch zwei Fragen. Vielleicht sind Sie auch schon auf diese Probleme gestoßen und haben bereits eine Lösung.
Meine Fragen sind:

1.) Haben Sie bereits eine Möglichkeit gefunden, Besucher der Website um Erlaubnis zu bitten, ihren Standort abzufragen?
Für Apps tun Sie dies für Android unter AndroidManifest.xml und für iOs unter info.plist. Aber wie mache ich das für eine Webanwendung?

2.) Hast du schon eine Funktion gebaut, die den Abstand zwischen zwei Punkten in Metern berechnet?

Über eine Antwort würde ich mich auf jeden Fall freuen! Ihr würdet mir sehr helfen!

@xpat ja, ich habe einen Ordner, in dem sich die locationJs-Datei befindet. Entschuldigung, ich habe Ihre Nachricht heute erst gesehen.
Für die Pubspec ändert sich nichts, Sie müssen nur das js-Paket hinzufügen.

@LarsHenning98
Hallo,

1) Mit dem Code, den ich gepostet habe, funktioniert es gut, um Erlaubnis für das Web zu bitten! Wenn Sie diesen Code für das Web verwenden, wird er automatisch um Erlaubnis gebeten. Sie können es in meinem Mock-Projekt ausprobieren, wenn Sie möchten: https://www.nearysport.com/
2) Ja, aber Sie müssen es serverseitig tun, clientseitig rufen Sie den Breiten- und Längengrad vom Benutzer ab und berechnen dann die Entfernung zwischen zwei Geolokalisierungspunkten mit beispielsweise der Haversine-Formel.

Lass mich wissen, ob ich deine Frage beantwortet habe!

@lionelquirynen Danke, ich laufe im Kreis herum und versuche herauszufinden, wie ich das für ein Klassenprojekt zum Laufen bringen kann. Ich habe pubspec.yaml zum Laufen gebracht und die Datei locationJS.dart in meine loading_screen.dart-Datei importiert. Wie auch immer, vielleicht können Sie leicht sehen, wie das funktioniert. In der Zwischenzeit stecke ich weiter weg. Hier ist ein Link zu der Nachricht, die ich am Schwarzen Brett der Klasse gepostet habe: https://www.appbrewery.co/courses/548873/lectures/9989052/comments/5326630

FYI @LarsHenning98

Könnten Sie Ihre Pubspec und Ihren Ladebildschirm posten?

@lionelquirynen Ja, die Pubspec: `name: clima
Beschreibung: Eine neue Flutter-Anwendung.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  geolocator: ^5.3.0
  js: ^0.6.1+1

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  assets:
  - images/

  fonts:
  - family: Spartan MB
    fonts:
    - asset: fonts/SpartanMB-Black.otf
      weight: 900`

@lionelquirynen und die loading_screen.dart:

import 'dart:developer';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:clima/locationJS.dart';
import 'package:js/js.dart';

class LoadingScreen extends StatefulWidget {
  <strong i="7">@override</strong>
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  void getCurrentPosition() async {
    Position position = await Geolocator()
        .getCurrentPosition(desiredAccuracy: LocationAccuracy.low);

    print(position);
  }

  <strong i="8">@override</strong>
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
// Get the current location
          },
          child: Text('Get Location'),
        ),
      ),
    );
  }
}

Sie rufen die Methode nicht auf, deshalb sollten Sie sie in InitState setzen

@lionelquirynen Danke für die Hilfe. Ich hasse es, mich auf Sie (oder irgendjemanden anderen) verlassen zu müssen, aber ich bin immer noch verwirrt darüber, in welche Datei ich es einfügen oder von wo aus ich es aufrufen soll. Hier ist ein Link zum vollständigen Projekt. . Und das kommt aus dem 13. Modul im Complete Flutter Development Bootcamp , das leider vor Flutter Web gemacht wurde.

Sie könnten die Methode getcurrentposition in onpressed aufrufen, da ich den Aufruf der Methode nirgendwo sehe, sollten Sie sie irgendwo aufrufen, um die Standortanfrage auszulösen

Da bleibe ich hängen. Ich habe gerade die Datei loading_screen.dart aktualisiert, falls Sie sich ansehen möchten, was ich versuche, basierend darauf, wie ich Ihren Vorschlag verstehe. In Dart Analysis bekomme ich eine Infomeldung: "Die Deklaration 'getCurrentPosition' wird nicht referenziert, und dass die Pakete js.dart und clima/locationJS.dart nicht verwendet werden, und dann die print(value.coords.latitude ) und print(value.coords.longitude) sind verschnörkelt grau unterstrichen und die Meldung lautet „Set-Literale wurden bis Version 2.2 nicht unterstützt, aber dieser Code ist erforderlich, um auf früheren Versionen ausgeführt werden zu können.“

Ist Ihr Standort aktuell?

Ich verwende den Code, den Sie auf stackoverflow veröffentlicht haben, wenn Sie das meinen? Ich werde mir Flatterkneipe nochmal holen, aber ja, ich glaube es ist aktuell.

Hast du den Code von github nicht stackoverflow eingefügt?

Le ven. 28. Februar. 2020 um 21:53, Christophe R. Patraldo <
[email protected]> ein Schreiben :

Ich werde mir Flatterkneipe nochmal holen, aber ja, ich glaube es ist aktuell.

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/Baseflow/flutter-geolocator/issues/392?email_source=notifications&email_token=ANUIRZMOEPTHHNBI7NDU3G3RFF2TJA5CNFSM4KURNFD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENKDZHY#issuecomment-59,103272
oder abbestellen
https://github.com/notifications/unsubscribe-auth/ANUIRZLLEKQ2CKHF2A7VUIDRFF2TJANCNFSM4KURNFDQ
.

Ich meine die .dart

Sie sollten den Code verwenden, den ich oben auf Github gepostet habe. Ich sollte meine Antwort auf Stackoverflow aktualisieren.

Ich habe mich auf den Stackoverflow-Code konzentriert, weil er einfacher zu verstehen war. Aber jetzt habe ich die Dateien loading_screen.dart und locationJS.dart mit Ihrem Code von Github aktualisiert. Ich erhalte Fehler Undefinierter Name „pos“ und die Methode „success“ ist nicht für die Klasse „_LoadingScreenState“ definiert und die Methode „_getCurrentLocation“ ist nicht für die Klasse „_LoadingScreenState“ definiert.

@JS('navigator.geolocation')
library jslocation;

import 'package:js/js.dart';

@JS('getCurrentPosition')
external void getPosition(Function success(GeolocationPosition pos));

@JS()
<strong i="6">@anonymous</strong>
class GeolocationCoordinates {
  external double get latitude;
  external double get longitude;
  external double get altitude;
  external double get accuracy;
  external double get altitudeAccuracy;
  external double get heading;
  external double get speed;
  external factory GeolocationCoordinates(
  {double latitude,
  double longitude,
  double altitude,
  double accuracy,
  double altitudeAccuracy,
  double heading,
  double speed});
}

@JS()
<strong i="7">@anonymous</strong>
class GeolocationPosition {
  external GeolocationCoordinates get coords;

  external factory GeolocationPosition({GeolcationCoordinates});
}

import 'dart:developer';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:clima/locationJS.dart';
import 'package:js/js.dart';

class LoadingScreen extends StatefulWidget {
  <strong i="5">@override</strong>
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  void getCurrentPosition() async {
      success(pos);
      try
          {
            print(pos.coords.latitude);
            print(pos.coords.longitude);
          } catch (ex) {
        print("Exception thrown: " + ex.toString());
      }
    }

  <strong i="6">@override</strong>
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
// Get the current location
         _getCurrentLocation();

          },
          child: Text('Get Location'),
        ),
      ),
    );
  }
}

Schauen Sie sich meinen Code in GitHub an, wie man ihn benutzt

Die Fehler, die ich erhalte, treten auf, nachdem ich den Code verwendet habe, den Sie auf Github (oben) gepostet haben. Ich war ratlos, wie genau ich diesen Code zu meinem Projekt hinzufügen soll (das ich mit Flutter Web baue). Wo platziere ich zum Beispiel den Teil, der mit Erfolg beginnt? Ich habe versucht, es hier einzustellen:

Klasse _LoadingScreenState erweitert Zustand {
void getCurrentPosition() async {
Erfolg (Pos);
Versuchen
{

Haben Sie ein öffentliches Repository mit Ihrem vollständigen Projektcode?

Nein, es ist nicht öffentlich, aber oben habe ich den Code gepostet:

Erfolg (pos) {
Versuchen {
print(pos.coords.latitude);
print(pos.coords.longitude);
} fangen (zB) {
print("Ausnahme ausgelöst: " + ex.toString());
}
}
_getCurrentLocation() {
if (kIsWeb) {
getCurrentPosition(allowInterop((pos) => success(pos)));
}anders{
//Standort abrufen Ios Android
}
}

Sie kopieren diesen Code und fügen ihn ein, und alles, was Sie tun müssen, ist, _getCurrentLocation() in Ihrer onPressed-Methode aufzurufen.

Geht dieser Code in die Datei locationJS.dart oder in loading_screen.dart?

„Und um dies zu nennen:

Erfolg (pos) {
Versuchen {
print(pos.coords.latitude);
print(pos.coords.longitude);
} fangen (zB) {
print("Ausnahme ausgelöst: " + ex.toString());
}
}
_getCurrentLocation() {
if (kIsWeb) {
getCurrentPosition(allowInterop((pos) => success(pos)));
}`

Im loading_screen ! Hast du verstanden, wie es funktioniert?

Ich komme vielleicht dorthin. Ich hatte gerade Dart Analysis (Android Studio) zum Erstellen von Function Function (GeoLocationPosition pos) get success => null; Ich werde sehen, was ich daraus machen kann. Aber nein, ich habe nicht wirklich eine Ahnung, was los ist. Dieses Problem – Geolokalisierung für das Internet zu bekommen – war eine echte Herausforderung für mich. Manchmal habe ich das Gefühl, in meinem Flutter Bootcamp nur das Nötigste gelernt zu haben.

Also, wenn ich die Zeilen hinzufüge, die mit Erfolg beginnen, nun, es ist komplett Versuch und Irrtum. Ich weiß nicht, wo ich sie hinstellen soll.

Ich mache Fortschritte. Ich habe endlich den Code bekommen, um ein Berechtigungsfenster zu öffnen. Und es druckt eine Nachricht an die Konsole. Danke für deine Hilfe und Ermutigung. Ich denke, es fängt endlich an zu funktionieren, und sobald es funktioniert, werde ich versuchen, es zu verstehen. Hoffentlich wird dieses Geolocator-Plugin für Flatter-Web aktualisiert. In der Zwischenzeit nochmals vielen Dank für deine Zeit, @lionelquirynen

OK perfekt ! Hoffe, du bist nicht zu verwirrt, lass es mich wissen, wenn du Hilfe brauchst!

Hier ist eine funktionierende Implementierung für das Web:
https://github.com/AseemWangoo/experiments_with_web
https://fir-signin-4477d.firebaseapp.com/#/location (während des Betriebs)
Kann als Plugin oder so wie es ist integriert werden. Wenn dies der Fall ist, verwenden Sie kIsWeb .

Ich möchte den Benutzerstandort im Flatter-Web abrufen, aber Mozilla GeoLocation funktioniert nicht !!! Kann mir jemand helfen?
Dies ist meine Frage zu StackOverFlow: https://stackoverflow.com/questions/64411270/flutter-web-get-location-on-web-by-location-plugin

Gibt es Neuigkeiten oder irgendetwas über den Web-Support dieses Pakets?!

@mvanbeusekom