Flutter-geolocator: Получить местоположение пользователя через браузер

Привет @lionelquirynen , на данный момент у нас нет реализации для веб-платформы. Мы хотели бы поддержать это и открыты для запросов на вытягивание.

Для дальнейшего использования вот две статьи от команды Flutter, описывающие, как добавить веб-поддержку в плагины:

• 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 Если я найду время, чтобы научиться это делать, я мог бы попробовать. Прямо сейчас я нашел способ сделать это через пакет js. Я быстро публикую код здесь, если кто-то хочет его прямо сейчас:

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

Вам просто нужно вызвать метод _getCurrentLocation.

@lionelquirynen Можете ли вы опубликовать свой pubspec.yaml? Я пытаюсь добавить строку: import ' package:Shared/locationJs.dart '; как вы разместили его на stackexchange , но я получаю ошибки. Вы создали общую папку на корневом уровне?

Привет @lionelquirynen!

Во-первых, я хочу поблагодарить вас за публикацию вашего решения здесь. Я думаю, вы помогли многим людям своим сообщением!

Однако у меня осталось еще два вопроса. Возможно, вы также сталкивались с этими проблемами и у вас уже есть решение.
Мои вопросы:

1.) Вы уже нашли способ запрашивать у посетителей веб-сайта разрешение запрашивать их местоположение?
Для приложений вы делаете это для Android в AndroidManifest.xml и для iOs в info.plist. Но как мне это сделать для веб-приложения?

2.) Вы уже построили функцию, которая вычисляет расстояние между двумя точками в метрах?

Я определенно буду рад, если вы ответите! Вы бы мне очень помогли!

@xpat да, у меня есть папка, в которой находится файл locationJs, извините, я только сегодня увидел ваше сообщение.
Для pubspec ничего не меняется, нужно просто добавить в него пакет js.

@ Ларс Хеннинг98
Привет,

1) С кодом, который я разместил, он хорошо работает, чтобы запросить разрешение для Интернета! Если вы используете этот код для Интернета, он автоматически запросит разрешение. Вы можете попробовать его в моем фиктивном проекте, если хотите: https://www.nearysport.com/
2) Да, но вы должны сделать это на стороне сервера, на стороне клиента вы получаете широту и долготу от пользователя, а затем вычисляете расстояние между двумя точками геолокации, например, с помощью формулы Хаверсина.

Дайте мне знать, если я ответил на ваш вопрос!

@lionelquirynen Спасибо, я бегаю по кругу, пытаясь понять, как заставить это работать для классного проекта. У меня работает pubspec.yaml, и я импортировал файл locationJS.dart в свой файл loading_screen.dart. В любом случае, возможно, вы сможете легко увидеть, как это работает. Тем временем я буду продолжать отключаться. Вот ссылка на сообщение, которое я разместил на доске объявлений класса: https://www.appbrewery.co/courses/548873/lectures/9989052/comments/5326630

К вашему сведению @LarsHenning98

Не могли бы вы опубликовать свой pubspec и экран загрузки?

@lionelquirynen Да, pubspec: `имя: clima
описание: Новое приложение Flutter.

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

Вы не вызываете метод, поэтому вы должны поместить его в InitState

@lionelquirynen Спасибо за помощь. Я ненавижу полагаться на вас (или на кого-либо еще), но я все еще не понимаю, в какой файл его поместить или из какого вызывать. Вот ссылка на полный проект. . И это из 13-го модуля в Complete Flutter Development Bootcamp , который, к сожалению, был сделан до flutter web.

Вы можете вызвать метод getcurrentposition в onpressed, потому что я нигде не вижу вызова метода, вы должны вызвать его где-нибудь, чтобы вызвать запрос местоположения

Вот где я застрял. Я только что обновил файл loading_screen.dart на случай, если вы захотите взглянуть на то, что я пытаюсь сделать, основываясь на том, как я понимаю ваше предложение. В Dart Analysis я получаю информационное сообщение: «Объявление 'getCurrentPosition' не упоминается, и что пакеты js.dart и clima/locationJS.dart не используются, а затем print(value.coords.latitude ) и print(value.coords.longitude) подчеркнуты серыми волнистыми линиями, а сообщение гласит: «Набор литералов не поддерживался до версии 2.2, но этот код необходим для работы в более ранних версиях».

Ваше местоположение обновлено?

Я использую код, который вы опубликовали на stackoverflow , если вы это имеете в виду? Я снова запущу флаттер-паб, но да, я считаю, что он обновлен.

Вы вставили код из github, а не из stackoverflow?

Левен. 28 фев. 2020 в 21:53, Кристоф Р. Патральдо <
уведомления@github.com> текст:

Я снова запущу флаттер-паб, но да, я считаю, что он обновлен.

—
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/Baseflow/flutter-geolocator/issues/392?email_source=notifications&email_token=ANUIRZMOEPTHHNBI7NDU3G3RFF2TJA5CNFSM4KURNFD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENKDZHY,37issment-1
или отписаться
https://github.com/notifications/unsubscribe-auth/ANUIRZLLEKQ2CKHF2A7VUIDRFF2TJANCNFSM4KURNFDQ
.

Я имею в виду .dart

Вы должны использовать код, который я разместил на github выше. Я должен обновить свой ответ на stackoverflow.

Я сосредоточился на коде stackoverflow, потому что его было легче понять. Но теперь я обновил файлы loading_screen.dart и locationJS.dart вашим кодом из Github. Я получаю сообщения об ошибках Неопределенное имя «pos», и метод «success» не определен для класса «_LoadingScreenState», а метод «_getCurrentLocation» не определен для класса «_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'),
        ),
      ),
    );
  }
}

Посмотрите на мой код в github, чтобы узнать, как его использовать.

Ошибки, которые я получаю, возникают после того, как я использовал код, который вы разместили на Github (выше). Я не знал, как именно добавить этот код в мой проект (который я создаю с помощью флаттера). Например, куда мне поместить часть, которая начинается с успеха? Пробовал ставить сюда:

класс _LoadingScreenState расширяет состояние {
недействительным getCurrentPosition () асинхронный {
успех(поз);
пытаться
{

У вас есть общедоступный репозиторий с полным кодом вашего проекта?

Нет, это не общедоступно, но выше я разместил код:

успех (позиция) {
пытаться {
печать (pos.coords.широта);
печать (pos.coords.longitude);
} поймать (пример) {
print("Выброшено исключение: " + ex.toString());
}
}
_getCurrentLocation () {
если (kIsWeb) {
getCurrentPosition(allowInterop((pos) => успех(pos)));
}еще{
//Получить местоположение iOS Android
}
}

Итак, вы копируете и вставляете этот код, и все, что вам нужно сделать, это вызвать _getCurrentLocation() в вашем методе onPressed.

Этот код находится в файле locationJS.dart или в файле loading_screen.dart?

`И чтобы вызвать это:

успех (позиция) {
пытаться {
печать (pos.coords.широта);
печать (pos.coords.longitude);
} поймать (пример) {
print("Выброшено исключение: " + ex.toString());
}
}
_getCurrentLocation () {
если (kIsWeb) {
getCurrentPosition(allowInterop((pos) => успех(pos)));
}`

На экране загрузки ! Вы поняли, как это работает?

Я могу быть там. У меня только что был Dart Analysis (Android Studio), создайте функцию Function (GeoLocationPosition pos), получите успех => null; Я посмотрю, что я могу сделать из этого. Но нет, я действительно не понимаю, что происходит. Эта проблема — получение геолокации для Интернета — стала для меня настоящей проблемой. Иногда мне кажется, что я изучил только самый минимум в своем Flutter Bootcamp.

Поэтому, когда я добавляю строки, которые начинаются с успеха, это полностью метод проб и ошибок. Я не знаю, куда их положить.

Я делаю успехи. Наконец-то я получил код для всплывающего окна разрешения. И он печатает сообщение на консоль. Спасибо за вашу помощь и поддержку. Я думаю, что это, наконец, начинает работать, и как только это произойдет, я попытаюсь разобраться в этом. Надеемся, что этот плагин геолокации будет обновлен для флаттера. Между тем, еще раз спасибо за ваше время, @lionelquirynen

Ок, прекрасно ! Надеюсь, вы не слишком запутались, дайте мне знать, если вам нужно руководство!

Вот рабочая реализация для Интернета:
https://github.com/AseemWangoo/experiments_with_web
https://fir-signin-4477d.firebaseapp.com/#/location (пока работает)
Может быть интегрирован как плагин или как есть. Если как есть, используйте kIsWeb .

Я хочу получить местоположение пользователя в сети флаттера, но Mozilla GeoLocation не работает !!! Может ли кто-нибудь мне помочь?
Это мой вопрос о StackOverFlow: https://stackoverflow.com/questions/64411270/flutter-web-get-location-on-web-by-location-plugin

Есть какие-нибудь новости или что-нибудь о веб-поддержке этого пакета?!

@mvanbeusekom