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 إليه.

تضمين التغريدة
أهلا،

1) باستخدام الكود الذي نشرته ، من الجيد طلب الإذن للويب! إذا كنت تستخدم هذا الرمز للويب ، فسيطلب الإذن تلقائيًا ، ويمكنك تجربته في مشروعي الوهمي إذا كنت تريد: https://www.nearysport.com/
2) نعم ولكن عليك القيام بذلك من جانب الخادم ، ومن جانب العميل تقوم باسترداد خط العرض وخط الطول من المستخدم ثم تقوم بحساب المسافة بين نقطتي تحديد الموقع الجغرافي باستخدام صيغة Haversine على سبيل المثال.

اسمحوا لي أن أعرف إذا أجبت على سؤالك!

lionelquirynen شكرًا ، أنا أركض في دوائر محاولًا معرفة كيفية جعل هذا العمل لمشروع الفصل. لقد حصلت على عمل pubspec.yaml وقمت باستيراد ملف locationJS.dart في ملف loading_screen.dart. على أي حال ، ربما يمكنك بسهولة معرفة كيفية جعل هذا العمل. في هذه الأثناء ، سأستمر في التوصيل بعيدًا. إليك رابط للرسالة التي نشرتها على لوحة إعلانات الفصل: https://www.appbrewery.co/courses/548873/lectures/9989052/comments/5326630

fyi @ 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 شكرا للمساعدة. أكره الاعتماد عليك (أو أي شخص آخر) ، لكنني ما زلت في حيرة من أمري بشأن الملف الذي يجب وضعه فيه أو الاتصال به. إليك رابط للمشروع الكامل. . وهذا يأتي من الوحدة الثالثة عشرة في Complete Flutter Development Bootcamp ، والتي لسوء الحظ تم إجراؤها قبل flutter web.

يمكنك استدعاء الطريقة getcurrentposition in onpressed لأنني لا أرى في أي مكان استدعاء الطريقة ، يجب أن تسميها في مكان ما لتشغيل طلب الموقع

هذا هو المكان الذي أعلق فيه. لقد قمت للتو بتحديث ملف loading_screen.dart في حال كنت تريد إلقاء نظرة على ما أحاول ، بناءً على كيفية فهمي لاقتراحك. في Dart Analysis ، أتلقى رسالة معلومات: "لم تتم الإشارة إلى التصريح 'getCurrentPosition' ، وأن الحزم js.dart و clima / locationJS.dart غير مستخدمة ، ثم الطباعة (value.coords.latitude ) والطباعة (value.coords.longitude) تم تسطيرها باللون الرمادي المتعرج وتقرأ الرسالة "لم يتم دعم Set literals حتى الإصدار 2.2 ، ولكن هذا الرمز مطلوب ليتم تشغيله على الإصدارات السابقة."

هل موقعك محدث؟

أنا أستخدم الكود الذي نشرته على stackoverflow ، إذا كان هذا ما تعنيه؟ سأقوم بتشغيل حانة الرفرفة مرة أخرى ، لكن نعم ، أعتقد أنها محدثة.

هل قمت بلصق الكود من github وليس stackoverflow؟

لو فين. 28 فبراير. 2020، 21:53، كريستوف ر. باترالدو <
[email protected]> بريد إلكتروني:

سأقوم بتشغيل حانة الرفرفة مرة أخرى ، لكن نعم ، أعتقد أنها محدثة.

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/Baseflow/flutter-geolocator/issues/392؟email_source=notifications&email_token=ANUIRZMOEPTHHNBI7NDU3G3RFF2TJA5CNFSM4KURNFD2YY3PNVWWK3TUL52HS4DFVREXG43
أو إلغاء الاشتراك
https://github.com/notifications/unsubscribe-auth/ANUIRZLLEKQ2CKHF2A7VUIDRFF2TJANCNFSM4KURNFDQ
.

أعني دارت

يجب عليك استخدام الكود الذي نشرته على جيثب أعلاه. يجب أن أقوم بتحديث إجابتي على 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 (أعلاه). لقد كنت في حيرة بشأن كيفية إضافة هذا الرمز بالضبط إلى مشروعي (الذي أقوم ببنائه باستخدام flutter web). على سبيل المثال ، أين أضع الجزء الذي يبدأ بالنجاح؟ حاولت وضعه هنا:

تمدد class _LoadingScreenState الحالة {
getCurrentPosition () باطل غير متزامن {
نجاح (نقاط البيع) ؛
يحاول
{

هل لديك مستودع عام به كود مشروعك الكامل؟

لا ، هذا ليس عامًا ولكني قمت بنشر الرمز أعلاه:

نجاح (نقاط البيع) {
يحاول {
طباعة (pos.coords.latitude) ؛
طباعة (pos.coords.longitude) ؛
} catch (على سبيل المثال) {
طباعة ("استثناء تم طرحه:" + ex.toString ()) ؛
}
}
_getCurrentLocation () {
إذا (kIsWeb) {
getCurrentPosition (allowInterop ((pos) => Success (pos))) ؛
}آخر{
// احصل على موقع Ios Android
}
}

لذلك تقوم بنسخ هذا الرمز ولصقه وكل ما عليك فعله هو استدعاء _getCurrentLocation () في طريقة onPressed ..

هل يتم وضع هذا الرمز في ملف locationJS.dart أو loading_screen.dart؟

ولكي نسمي هذا:

نجاح (نقاط البيع) {
يحاول {
طباعة (pos.coords.latitude) ؛
طباعة (pos.coords.longitude) ؛
} catch (على سبيل المثال) {
طباعة ("استثناء تم طرحه:" + ex.toString ()) ؛
}
}
_getCurrentLocation () {
إذا (kIsWeb) {
getCurrentPosition (allowInterop ((pos) => Success (pos))) ؛
} `

في تحميل_شاشة! هل فهمت كيف تعمل؟

قد أكون هناك. لقد حصلت للتو على Dart Analysis (Android Studio) لإنشاء وظيفة وظيفية (GeoLocationPosition pos) الحصول على النجاح => null ؛ سأرى ما يمكنني فعله من ذلك. لكن لا ، ليس لدي فهم حقيقي لما يحدث. كانت هذه المشكلة - الحصول على تحديد الموقع الجغرافي للويب - تحديًا حقيقيًا بالنسبة لي. أشعر أحيانًا كما لو أنني تعلمت الحد الأدنى فقط في Flutter Bootcamp.

لذلك عندما أقوم بإضافة السطور التي تبدأ بالنجاح ، فهي تجربة وخطأ تمامًا. لا أعرف أين أضعهم.

أنا أحقق تقدمًا. أخيرًا حصلت على الكود لانبثاق نافذة الإذن. وهي تطبع رسالة إلى وحدة التحكم. شكرا لمساعدتكم وتشجيعكم. أعتقد أنه بدأ العمل أخيرًا ، وبمجرد أن يحدث ذلك ، سأحاول فهمه. نأمل أن يتم تحديث هذا البرنامج المساعد geolocator للويب flutter. في غضون ذلك ، شكرًا مرة أخرى على وقتك ، lionelquirynen

حسنا ممتاز ! آمل ألا ترتبك كثيرًا ، أخبرني إذا كنت بحاجة إلى إرشادات!

فيما يلي تطبيق عملي للويب:
https://github.com/AseemWangoo/experiments_with_web
https://fir-signin-4477d.firebaseapp.com/#/location (أثناء التشغيل)
يمكن دمجها كمكوِّن إضافي أو كما هي. إذا كان كما هو ، استخدم kIsWeb .

أريد الحصول على موقع المستخدم على الويب flutter ولكن Mozilla GeoLocation لا يعمل !!! هل يمكن لأحدهم مساعدتي؟
هذا سؤالي على StackOverFlow: https://stackoverflow.com/questions/64411270/flutter-web-get-location-on-web-by-location-plugin

هل هناك أي أخبار أو أي شيء عن دعم الويب لهذه الحزمة ؟!

تضمين التغريدة