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.) 웹사이트 방문자에게 위치를 쿼리할 수 있는 권한을 요청하는 방법을 이미 찾았습니까?
앱의 경우 AndroidManifest.xml에서 Android용으로, info.plist에서 iOS용으로 이 작업을 수행합니다. 그러나 웹 응용 프로그램에서는 어떻게 해야 합니까?

2.) 두 점 사이의 거리를 미터 단위로 계산하는 함수를 이미 구축했습니까?

당신이 대답한다면 나는 확실히 기쁠 것입니다! 당신은 나에게 많은 도움이 될 것입니다!

@xpat 네, locationJs 파일이 있는 폴더가 있습니다. 죄송합니다. 오늘에서야 당신의 메시지를 보았습니다.
pubspec의 경우 아무 것도 변경되지 않으며 js 패키지를 추가하기만 하면 됩니다.

@LarsHenning98
안녕,

1) 제가 올린 코드로 웹에 권한을 요청하니 잘 됩니다! 웹용으로 이 코드를 사용하면 자동으로 권한을 요청합니다. 원하는 경우 내 모의 프로젝트에서 시도해 볼 수 있습니다. https://www.nearysport.com/
2) 예, 하지만 서버 측, 클라이언트 측에서 사용자로부터 위도와 경도를 검색한 다음 Haversine 공식과 같은 두 지리적 위치 사이의 거리를 계산해야 합니다.

내가 당신의 질문에 대답했다면 알려주세요!

@lionelquirynen 감사합니다. 수업 프로젝트에서 이 작업을 수행하는 방법을 찾기 위해 여기저기 돌아다니고 있습니다. pubspec.yaml이 작동하고 loading_screen.dart 파일에 locationJS.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 도움을 주셔서 감사합니다. 나는 당신(또는 다른 사람)에게 의존해야 하는 것을 싫어하지만, 어떤 파일을 넣거나 호출해야 할지 여전히 혼란스럽습니다. 다음은 전체 프로젝트에 대한 링크입니다. . 그리고 이것은 불행히도 flutter web 이전에 만들어진 Complete Flutter Development Bootcamp의 13번째 모듈에서 가져온 것입니다.

메서드 호출이 어디에도 표시되지 않기 때문에 onpressed에서 getcurrentposition 메서드를 호출할 수 있습니다. 위치 요청을 트리거하려면 어딘가에서 호출해야 합니다.

그게 내가 막히는 곳이야. 내가 당신의 제안을 이해하는 방식을 기반으로 내가 시도하는 것을 살펴보고 싶은 경우를 대비하여 방금 loading_screen.dart 파일을 업데이트했습니다. Dart Analysis에서 다음과 같은 정보 메시지가 나타납니다. "' getCurrentPosition' 선언이 참조되지 않고 js.dart 및 clima/locationJS.dart 패키지가 사용되지 않고 print(value.coords.latitude) ) 및 print(value.coords.longitude)는 회색 물결선 밑줄이 그어져 있고 "세트 리터럴은 버전 2.2까지 지원되지 않았지만 이 코드는 이전 버전에서 실행할 수 있어야 합니다."라는 메시지가 표시됩니다.

locationjs가 최신 상태입니까?

나는 당신이 stackoverflow 에 게시한 코드를 사용하고 있습니다. 그게 당신이 의미하는 바인가요? 나는 다시 flutter pub get을 운영할 것이지만, 예, 최신 상태라고 생각합니다.

stackoverflow가 아닌 ​​github의 코드를 붙여넣으셨나요?

르 벤. 28열 2020 à 21:53, Christophe R. Patraldo <
[email protected]> 에크리트:

나는 다시 flutter pub get을 운영할 것이지만, 예, 최신 상태라고 생각합니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/Baseflow/flutter-geolocator/issues/392?email_source=notifications&email_token=ANUIRZMOEPTHHNBI7NDU3G3RFF2TJA5CNFSM4KURNFD2YYY3PNVWWK3TUL52HS4DFVEXG43VMVBW63
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/ANUIRZLLEKQ2CKHF2A7VUIDRFF2TJANCNFSM4KURNFDQ
.

내 말은 .dart

위의 github에 게시한 코드를 사용해야 합니다. stackoverflow에 대한 답변을 업데이트해야 합니다.

이해하기 쉽기 때문에 stackoverflow 코드에 집중했습니다. 하지만 이제 Github의 코드로 loading_screen.dart 및 locationJS.dart 파일을 업데이트했습니다. '_LoadingScreenState' 클래스에 대해 'success' 메서드가 정의되지 않았고 '_LoadingScreenState' 클래스에 대해 '_getCurrentLocation' 메서드가 정의되지 않았습니다.

@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.latitude);
인쇄(pos.coords.longitude);
} 잡기(예시) {
print("예외 발생: " + ex.toString());
}
}
_getCurrentLocation() {
if (kIsWeb) {
getCurrentPosition(allowInterop((pos) => 성공(pos)));
}또 다른{
// 위치 가져오기 Ios Android
}
}

따라서 이 코드를 복사하여 붙여넣고 onPressed 메서드에서 _getCurrentLocation()을 호출하기만 하면 됩니다.

이 코드는 locationJS.dart 파일이나 loading_screen.dart에 들어가나요?

`그리고 이것을 호출하려면 :

성공(포지션) {
노력하다 {
인쇄(pos.coords.latitude);
인쇄(pos.coords.longitude);
} 잡기(예시) {
print("예외 발생: " + ex.toString());
}
}
_getCurrentLocation() {
if (kIsWeb) {
getCurrentPosition(allowInterop((pos) => 성공(pos)));
}`

loading_screen에서 ! 어떻게 작동하는지 이해하셨나요?

도착할 수도 있습니다. 방금 Dart Analysis(Android Studio)가 Function Function(GeoLocationPosition pos)을 생성하도록 했습니다. get success => 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