Flutter-geolocator: Dapatkan lokasi pengguna melalui browser

Hai @lionelquirynen , saat ini kami tidak memiliki implementasi untuk platform web. Kami ingin mendukung ini dan terbuka untuk permintaan tarik.

Untuk referensi di masa mendatang, berikut adalah dua artikel dari tim Flutter yang menjelaskan cara menambahkan dukungan Web ke plugin:

• 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 Jika saya menemukan waktu untuk mempelajari cara melakukannya, saya dapat mencobanya. Saat ini saya menemukan cara untuk melakukannya melalui paket js. Saya segera memposting kode di sini jika seseorang menginginkannya segera:

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

Anda hanya perlu memanggil metode _getCurrentLocation.

@lionelquirynen Bisakah Anda memposting pubspec.yaml Anda? Saya mencoba menambahkan baris: import ' package:Shared/locationJs.dart '; saat Anda mempostingnya di stackexchange , tetapi saya mendapatkan kesalahan. Apakah Anda membuat folder Bersama di tingkat root?

Halo @lionelquirynen!

Pertama, saya ingin mengucapkan terima kasih telah memposting solusi Anda di sini. Saya pikir Anda membantu banyak orang dengan pesan Anda!

Namun, saya masih memiliki dua pertanyaan. Anda mungkin juga pernah menemukan masalah ini dan sudah memiliki solusinya.
Pertanyaan saya adalah:

1.) Apakah Anda sudah menemukan cara untuk meminta izin pengunjung situs web untuk menanyakan lokasi mereka?
Untuk aplikasi Anda melakukan ini untuk Android di bawah AndroidManifest.xml dan untuk iOs di bawah info.plist. Tapi bagaimana saya melakukannya untuk aplikasi web?

2.) Sudahkah Anda membuat fungsi yang menghitung jarak antara dua titik dalam meter?

Saya pasti akan senang jika Anda menjawab! Anda akan sangat membantu saya!

@xpat ya saya punya folder tempat file locationJs berada, maaf saya baru melihat pesan Anda hari ini.
Untuk pubspec, tidak ada perubahan, Anda hanya perlu menambahkan paket js ke dalamnya.

@LarsHenning98
Hai,

1) Dengan kode yang saya posting, berfungsi dengan baik untuk meminta izin untuk web ! Jika Anda menggunakan kode ini untuk web, itu akan meminta izin secara otomatis, Anda dapat mencobanya di proyek tiruan saya jika Anda mau: https://www.nearysport.com/
2) Ya, tetapi Anda harus melakukannya di sisi server, di sisi klien Anda mengambil garis lintang dan bujur dari pengguna dan kemudian Anda menghitung jarak antara dua titik geolokasi dengan misalnya Formula Haversine.

Beri tahu saya jika saya menjawab pertanyaan Anda!

@lionelquirynen Terima kasih, saya berputar-putar mencoba mencari cara agar ini berfungsi untuk proyek kelas. Saya menjalankan pubspec.yaml dan saya telah mengimpor file locationJS.dart di file loading_screen.dart saya. Bagaimanapun, mungkin Anda dapat dengan mudah melihat bagaimana membuat ini bekerja. Sementara itu, saya akan terus menyambungkannya. Berikut tautan ke pesan yang saya posting di papan buletin kelas: https://www.appbrewery.co/courses/548873/lectures/9989052/comments/5326630

FYI @LarsHenning98

Bisakah Anda memposting pubspec dan layar pemuatan Anda?

@lionelquirynen Ya, pubspec: `name: clima
deskripsi: Aplikasi Flutter baru.

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 dan 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'),
        ),
      ),
    );
  }
}

Anda tidak memanggil metode, itu sebabnya, Anda harus meletakkannya di InitState

@lionelquirynen Terima kasih atas bantuannya. Saya benci harus bergantung pada Anda (atau siapa pun), tetapi saya masih bingung tentang file mana yang akan saya masukkan atau panggil dari. Berikut tautan ke proyek lengkapnya. . Dan ini berasal dari modul ke-13 di Bootcamp Pengembangan Flutter Lengkap , yang sayangnya dibuat sebelum web bergetar.

Anda dapat memanggil metode getcurrentposition di onpressed karena saya tidak melihat di mana pun panggilan ke metode tersebut, Anda harus memanggilnya di suatu tempat untuk memicu permintaan lokasi

Di situlah saya terjebak. Saya baru saja memperbarui file loading_screen.dart jika Anda ingin melihat apa yang saya coba, berdasarkan bagaimana saya memahami saran Anda. Dalam Analisis Dart saya mendapatkan pesan info: "Deklarasi ' getCurrentPosition' tidak direferensikan, dan bahwa paket js.dart dan clima/locationJS.dart tidak digunakan, dan kemudian print(value.coords.latitude ) dan print(value.coords.longitude) digarisbawahi abu-abu berlekuk dan pesan berbunyi "Setel literal tidak mendukung hingga versi 2.2, tetapi kode ini diperlukan untuk dapat berjalan pada versi sebelumnya."

Apakah lokasi Anda mutakhir?

Saya menggunakan kode yang Anda terbitkan di stackoverflow , jika itu yang Anda maksud? Saya akan menjalankan flutter pub get lagi, tapi ya, saya yakin ini mutakhir.

Apakah Anda menempelkan kode dari github bukan stackoverflow?

Le ven. 28 fevr. 2020 21:53, Christophe R. Patraldo <
[email protected]> sebuah écrit :

Saya akan menjalankan flutter pub get lagi, tapi ya, saya yakin ini mutakhir.

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/Baseflow/flutter-geolocator/issues/392?email_source=notifications&email_token=ANUIRZMOEPTHHNBI7NDU3G3RFF2TJA5CNFSM4KURNFD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVX310
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/ANUIRZLLEKQ2CKHF2A7VUIDRFF2TJANCNFSM4KURNFDQ
.

maksud saya .dart

Anda harus menggunakan kode yang saya posting di github, di atas. Saya Harus memperbarui jawaban saya di stackoverflow.

Saya fokus pada kode stackoverflow karena lebih mudah dipahami. Tapi sekarang saya telah memperbarui file loading_screen.dart dan locationJS.dart dengan kode Anda dari Github. Saya mendapatkan kesalahan Nama tidak terdefinisi 'pos' dan metode 'sukses' tidak ditentukan untuk kelas '_LoadingScreenState' dan metode '_getCurrentLocation' tidak ditentukan untuk kelas '_LoadingScreenState.'

@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'),
        ),
      ),
    );
  }
}

Lihat kode saya di github tentang cara menggunakannya

Kesalahan yang saya dapatkan adalah setelah saya menggunakan kode yang Anda posting di Github (di atas). Saya bingung bagaimana tepatnya menambahkan kode itu ke proyek saya (yang saya bangun dengan web flutter). Misalnya, di mana saya harus meletakkan bagian yang dimulai dengan kesuksesan? Saya mencoba meletakkannya di sini:

class _LoadingScreenState memperluas Status {
void getCurrentPosition() async {
sukses (pos);
mencoba
{

Apakah Anda memiliki repositori publik dengan kode proyek lengkap Anda?

Tidak, ini bukan publik tetapi di atas saya memposting kode:

sukses(pos) {
mencoba {
print(pos.coords.latitude);
print(pos.coords.longitude);
} tangkap (mis) {
print("Eksepsi dilempar : " + ex.toString());
}
}
_getCurrentLocation() {
if (kIsWeb) {
getCurrentPosition(allowInterop((pos) => sukses(pos)));
}lain{
//Dapatkan lokasi iOS Android
}
}

Jadi Anda copy paste kode ini dan yang harus Anda lakukan adalah memanggil _getCurrentLocation() dalam metode onPressed Anda..

Apakah kode ini masuk ke file locationJS.dart atau loading_screen.dart?

`Dan untuk memanggil ini:

sukses(pos) {
mencoba {
print(pos.coords.latitude);
print(pos.coords.longitude);
} tangkap (mis) {
print("Eksepsi dilempar : " + ex.toString());
}
}
_getCurrentLocation() {
if (kIsWeb) {
getCurrentPosition(allowInterop((pos) => sukses(pos)));
}`

Di layar loading_! Apakah Anda mengerti cara kerjanya?

Saya mungkin akan sampai di sana. Saya baru saja membuat Analisis Dart (Android Studio) membuat Fungsi Fungsi (pos GeoLocationPosition) get success => null; Saya akan melihat apa yang bisa saya lakukan dari itu. Tapi tidak, saya tidak benar-benar memahami apa yang terjadi. Masalah ini -- mendapatkan geolokasi untuk web -- merupakan tantangan nyata bagi saya. Kadang-kadang saya merasa seolah-olah saya hanya belajar minimal di Flutter Bootcamp saya.

Jadi ketika saya menambahkan baris yang dimulai dengan sukses, itu benar-benar trial and error. Saya tidak tahu di mana harus meletakkannya.

Saya membuat kemajuan. Saya akhirnya mendapatkan kode untuk memunculkan jendela izin. Dan itu mencetak pesan ke konsol. Terima kasih atas bantuan dan dorongan Anda. Saya pikir itu akhirnya mulai bekerja, dan begitu berhasil, saya akan mencoba dan memahaminya. Semoga plugin geolocator ini akan diperbarui untuk web flutter. Sementara itu, sekali lagi terima kasih atas waktunya, @lionelquirynen

Oke sempurna ! Semoga Anda tidak terlalu bingung, beri tahu saya jika Anda membutuhkan panduan!

Berikut ini adalah implementasi yang berfungsi untuk web:
https://github.com/AseemWangoo/experiments_with_web
https://fir-signin-4477d.firebaseapp.com/#/location (saat naik)
Dapat diintegrasikan sebagai plugin atau apa adanya. Jika demikian, gunakan kIsWeb .

Saya ingin mendapatkan lokasi pengguna di web flutter tetapi Mozilla GeoLocation tidak berfungsi !!! Adakah yang bisa membantu saya?
Ini pertanyaan saya di StackOverFlow: https://stackoverflow.com/questions/64411270/flutter-web-get-location-on-web-by-location-plugin

Apakah ada berita atau apa pun tentang dukungan web untuk paket ini?!

@mvanbeusekom