استفسار عن تتبع الخريطة في الوقت الفعلي باستعمال flutter

مصطفى امين2 · 6 ديسمبر 2022

السلام عليكم يا اخوتى

انا حاليا اقوم بعمل برنامج flutter and golang زي اوبر

وكنت عايز اعمل live tracking و realtime streaming

كنت بفكر استخدم mqtt فهل فى بديل افضل او طريقة افضل performance و speed و security

Ahmed Sadek Elamine Touahria · 6 ديسمبر 2022

بتاريخ 27 دقائق مضت قال مصطفى امين2:

شكرا على اجابتك ولكن اقصد النقل من تطبيق الى اخر عن طريق server

من جانب السيرفر فإن MQTT هي من أقوى تقنيات الوقت الفعلي والتي تعتمد عليها أغلب شركات العالم مثل أمازون وجوجل وغيرها . حيث توفر أداء عالي وتكلفة أقل والكثير من الميزات

Ahmed Sadek Elamine Touahria · 6 ديسمبر 2022

Flutter Google Map مع تتبع الموقع المباشر - أسلوب أوبر

الإعداد الأولي
تأكد من إعداد بيئتك وفقًا لذلك لتمكين تتبع الموقع على كل من IOS و Android باتباع الخطوات الواردة في README الخاص بالحزمة فيما يتعلق بملف بيان Android و iOS Info.plist.

بمجرد الإعداد ، تبدو التبعيات مثل

....
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_polyline_points: ^1.0.0
  google_maps_flutter: ^2.1.7
  location: ^4.4.0
...

خريطة جوجل 🗺

قم بإنشاء StatefulWidget يسمى OrderTrackingPage مع فئة الحالة المقابلة ، حيث قمت باستيراد الحزم المطلوبة بالإضافة إلى بعض المصدر الثابت وموقع الوجهة

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class OrderTrackingPage extends StatefulWidget {
  const OrderTrackingPage({Key? key}) : super(key: key);
@override
  State<OrderTrackingPage> createState() => OrderTrackingPageState();
}
class OrderTrackingPageState extends State<OrderTrackingPage> {
  final Completer<GoogleMapController> _controller = Completer();
static const LatLng sourceLocation = LatLng(37.33500926, -122.03272188);
  static const LatLng destination = LatLng(37.33429383, -122.06600055);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ... GoogleMap widget will be here ...,
    );
  }
}

أنشئ أداة GoogleMap وعيّن موقع الكاميرا الأولي على موقع المصدر. تحتاج الخريطة إلى التكبير قليلاً ، لذا اضبطها على 13.5.

نحتاج إلى علامة / دبوس لفهم الموقع الدقيق. تحديد علامة وتعيين موضعها إلى موقع المصدر. للوجهة ، أضف علامة / دبوس آخر.

GoogleMap(
  initialCameraPosition: const CameraPosition(
    target: sourceLocation,
    zoom: 13.5,
  ),
  markers: {
    const Marker(
      markerId: MarkerId("source"),
      position: sourceLocation,
    ),
    const Marker(
      markerId: MarkerId("destination"),
      position: destination,
    ),
  },
  onMapCreated: (mapController) {
    _controller.complete(mapController);
  },
),

1*46wjXuv13GgNIE-5OBKlSg.png

رسم اتجاه الطريق 〰
الشيء التالي الذي أريد القيام به هو رسم خط من الوجهة إلى المصدر. قم بإنشاء قائمة فارغة تسمى polylineCoordinates. قم بإنشاء مثيل من PolylinePoints ووظيفة غير متزامنة تسمى getPolyPoints. تقوم طريقة getRouteBetweenCoordinates بإرجاع قائمة النقاط متعددة الخطوط. كانت مواقع مفتاح Google API والمصدر والوجهة مطلوبة. إذا لم تكن النقاط فارغة ، نقوم بتخزينها في إحداثيات متعددة الخطوط.

List<LatLng> polylineCoordinates = [];
void getPolyPoints() async {
  PolylinePoints polylinePoints = PolylinePoints();
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
    google_api_key, // Your Google Map Key
    PointLatLng(sourceLocation.latitude, sourceLocation.longitude),
    PointLatLng(destination.latitude, destination.longitude),
  );
if (result.points.isNotEmpty) {
    result.points.forEach(
      (PointLatLng point) => polylineCoordinates.add(
        LatLng(point.latitude, point.longitude),
      ),
    );
    setState(() {});
  }
}

على initState استدعاء getPolyPoints

@override
void initState() {
  getPolyPoints();
  super.initState();
}

العودة إلى أداة GoogleMap ، حدد الخطوط المتعددة.

GoogleMap(
...
  polylines: {
    Polyline(
      polylineId: const PolylineId("route"),
      points: polylineCoordinates,
      color: const Color(0xFF7B61FF),
      width: 6,
    ),
  },
),

1*gpJFqG9Np7o75-6Wl5hXGg.png

تحديثات الموقع في الوقت الحقيقي على الخريطة 🔴
نصل الآن إلى الجزء الأكثر إثارة ، نحن بحاجة إلى موقع الجهاز. إنشاء متغير nullable يسمى currentLocation. ثم تقوم دالة تسمى getCurrentLocation، Inside، بإنشاء مثيل للموقع. بمجرد أن نحصل على الموقع ، قم بتعيين الموقع الحالي ليكون مساويًا للموقع. عند تغيير الموقع ، قم بتحديث الموقع الحالي. اجعلها مرئية للخريطة المسماة setState.

LocationData? currentLocation;
void getCurrentLocation() async {
    Location location = Location();
location.getLocation().then(
      (location) {
        currentLocation = location;
      },
    );
GoogleMapController googleMapController = await _controller.future;
location.onLocationChanged.listen(
      (newLoc) {
        currentLocation = newLoc;
googleMapController.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              zoom: 13.5,
              target: LatLng(
                newLoc.latitude!,
                newLoc.longitude!,
              ),
            ),
          ),
        );
setState(() {});
      },
    );
  }

تأكد من استدعاء getCurrentLocation على initState.

void initState() {
  getPolyPoints();
  getCurrentLocation();
  super.initState();
}

إذا كان CurrentLocation فارغًا ، فسيتم عرض نص التحميل. أيضًا ، أضف علامة / دبوسًا آخر للموقع الحالي بالإضافة إلى تغيير موضع الكاميرا الأولي إلى الموقع الحالي.

body: currentLocation == null
  ? const Center(child: Text("Loading"))
  : GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(
            currentLocation!.latitude!, currentLocation!.longitude!),
        zoom: 13.5,
      ),
      markers: {
        Marker(
          markerId: const MarkerId("currentLocation"),
          position: LatLng(
              currentLocation!.latitude!, currentLocation!.longitude!),
        ),
        const Marker(
          markerId: MarkerId("source"),
          position: sourceLocation,
        ),
        const Marker(
          markerId: MarkerId("destination"),
          position: destination,
        ),
      },
      onMapCreated: (mapController) {
        _controller.complete(mapController);
      },
      polylines: {
        Polyline(
          polylineId: const PolylineId("route"),
          points: polylineCoordinates,
          color: const Color(0xFF7B61FF),
          width: 6,
        ),
      },
    ),

1*lq4JEPj6y4N7RTP1wNMjdg.gif

مصطفى امين2 · 6 ديسمبر 2022

بتاريخ 10 دقائق مضت قال Ahmed Sadek:
Flutter Google Map مع تتبع الموقع المباشر - أسلوب أوبر

الإعداد الأولي
تأكد من إعداد بيئتك وفقًا لذلك لتمكين تتبع الموقع على كل من IOS و Android باتباع الخطوات الواردة في README الخاص بالحزمة فيما يتعلق بملف بيان Android و iOS Info.plist.

بمجرد الإعداد ، تبدو التبعيات مثل
....
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_polyline_points: ^1.0.0
  google_maps_flutter: ^2.1.7
  location: ^4.4.0
...
خريطة جوجل 🗺

قم بإنشاء StatefulWidget يسمى OrderTrackingPage مع فئة الحالة المقابلة ، حيث قمت باستيراد الحزم المطلوبة بالإضافة إلى بعض المصدر الثابت وموقع الوجهة
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class OrderTrackingPage extends StatefulWidget {
  const OrderTrackingPage({Key? key}) : super(key: key);
@override
  State<OrderTrackingPage> createState() => OrderTrackingPageState();
}
class OrderTrackingPageState extends State<OrderTrackingPage> {
  final Completer<GoogleMapController> _controller = Completer();
static const LatLng sourceLocation = LatLng(37.33500926, -122.03272188);
  static const LatLng destination = LatLng(37.33429383, -122.06600055);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ... GoogleMap widget will be here ...,
    );
  }
}
أنشئ أداة GoogleMap وعيّن موقع الكاميرا الأولي على موقع المصدر. تحتاج الخريطة إلى التكبير قليلاً ، لذا اضبطها على 13.5.

نحتاج إلى علامة / دبوس لفهم الموقع الدقيق. تحديد علامة وتعيين موضعها إلى موقع المصدر. للوجهة ، أضف علامة / دبوس آخر.
GoogleMap(
  initialCameraPosition: const CameraPosition(
    target: sourceLocation,
    zoom: 13.5,
  ),
  markers: {
    const Marker(
      markerId: MarkerId("source"),
      position: sourceLocation,
    ),
    const Marker(
      markerId: MarkerId("destination"),
      position: destination,
    ),
  },
  onMapCreated: (mapController) {
    _controller.complete(mapController);
  },
),
رسم اتجاه الطريق 〰
الشيء التالي الذي أريد القيام به هو رسم خط من الوجهة إلى المصدر. قم بإنشاء قائمة فارغة تسمى polylineCoordinates. قم بإنشاء مثيل من PolylinePoints ووظيفة غير متزامنة تسمى getPolyPoints. تقوم طريقة getRouteBetweenCoordinates بإرجاع قائمة النقاط متعددة الخطوط. كانت مواقع مفتاح Google API والمصدر والوجهة مطلوبة. إذا لم تكن النقاط فارغة ، نقوم بتخزينها في إحداثيات متعددة الخطوط.
List<LatLng> polylineCoordinates = [];
void getPolyPoints() async {
  PolylinePoints polylinePoints = PolylinePoints();
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
    google_api_key, // Your Google Map Key
    PointLatLng(sourceLocation.latitude, sourceLocation.longitude),
    PointLatLng(destination.latitude, destination.longitude),
  );
if (result.points.isNotEmpty) {
    result.points.forEach(
      (PointLatLng point) => polylineCoordinates.add(
        LatLng(point.latitude, point.longitude),
      ),
    );
    setState(() {});
  }
}
على initState استدعاء getPolyPoints
@override
void initState() {
  getPolyPoints();
  super.initState();
}
العودة إلى أداة GoogleMap ، حدد الخطوط المتعددة.
GoogleMap(
...
  polylines: {
    Polyline(
      polylineId: const PolylineId("route"),
      points: polylineCoordinates,
      color: const Color(0xFF7B61FF),
      width: 6,
    ),
  },
),
تحديثات الموقع في الوقت الحقيقي على الخريطة 🔴
نصل الآن إلى الجزء الأكثر إثارة ، نحن بحاجة إلى موقع الجهاز. إنشاء متغير nullable يسمى currentLocation. ثم تقوم دالة تسمى getCurrentLocation، Inside، بإنشاء مثيل للموقع. بمجرد أن نحصل على الموقع ، قم بتعيين الموقع الحالي ليكون مساويًا للموقع. عند تغيير الموقع ، قم بتحديث الموقع الحالي. اجعلها مرئية للخريطة المسماة setState.
LocationData? currentLocation;
void getCurrentLocation() async {
    Location location = Location();
location.getLocation().then(
      (location) {
        currentLocation = location;
      },
    );
GoogleMapController googleMapController = await _controller.future;
location.onLocationChanged.listen(
      (newLoc) {
        currentLocation = newLoc;
googleMapController.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              zoom: 13.5,
              target: LatLng(
                newLoc.latitude!,
                newLoc.longitude!,
              ),
            ),
          ),
        );
setState(() {});
      },
    );
  }
تأكد من استدعاء getCurrentLocation على initState.
void initState() {
  getPolyPoints();
  getCurrentLocation();
  super.initState();
}
إذا كان CurrentLocation فارغًا ، فسيتم عرض نص التحميل. أيضًا ، أضف علامة / دبوسًا آخر للموقع الحالي بالإضافة إلى تغيير موضع الكاميرا الأولي إلى الموقع الحالي.
body: currentLocation == null
  ? const Center(child: Text("Loading"))
  : GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(
            currentLocation!.latitude!, currentLocation!.longitude!),
        zoom: 13.5,
      ),
      markers: {
        Marker(
          markerId: const MarkerId("currentLocation"),
          position: LatLng(
              currentLocation!.latitude!, currentLocation!.longitude!),
        ),
        const Marker(
          markerId: MarkerId("source"),
          position: sourceLocation,
        ),
        const Marker(
          markerId: MarkerId("destination"),
          position: destination,
        ),
      },
      onMapCreated: (mapController) {
        _controller.complete(mapController);
      },
      polylines: {
        Polyline(
          polylineId: const PolylineId("route"),
          points: polylineCoordinates,
          color: const Color(0xFF7B61FF),
          width: 6,
        ),
      },
    ),

شكرا على اجابتك ولكن اقصد النقل من تطبيق الى اخر عن طريق server

استفسار عن تتبع الخريطة في الوقت الفعلي باستعمال flutter

السؤال

مصطفى امين2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Ahmed Sadek Elamine Touahria

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Ahmed Sadek Elamine Touahria

Flutter Google Map مع تتبع الموقع المباشر - أسلوب أوبر

خريطة جوجل 🗺

رابط هذا التعليق

شارك على الشبكات الإجتماعية

مصطفى امين2

Flutter Google Map مع تتبع الموقع المباشر - أسلوب أوبر

خريطة جوجل 🗺

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية