يا مساء الفل يا شباب! كتير مننا وهو شغال على Apps فيها خرائط (Maps) بيحتاج يعمل "Navigation" بسيط.. يعني عايز يرسم طريق بين نقطتين (مثلاً مكان اليوزر واللوكيشن بتاع الجراج) وكمان يتابع حركة اليوزر وهو ماشي عشان الطريق يتحدث معاه.
النهاردة هشرحلكم إزاي عملت كدة في تطبيق Easy Parking باستخدام flutter_osm_plugin و geolocator.
1 إزاي ترسم "الخط" (الطريق) بين نقطتين؟
في الـ OSM Plugin الموضوع بسيط جداً، فيه ميثود اسمها drawRoad دي بتاخد نقطة البداية والنهاية وبترسم لك "Polyline" بيمشي مع الشوارع الحقيقية، مش مجرد خط مستقيم!
map_service.dart
Future<void> drawRoute(GeoPoint start, GeoPoint end) async {
await mapController.drawRoad(
start,
end,
roadOption: const RoadOption(
roadWidth: 10,
roadColor: Colors.blue,
zoomInto: true,
),
);
}2 إزاي تتبع حركة اليوزر "Real-time"؟
عشان تعرف اليوزر مكانه فين دلوقتي وبيمشي إزاي بنستخدم الـ Geolocator. الفكرة إننا بنفتح "Stream" بيدينا اللوكيشن الجديد كل ما اليوزر يتحرك مسافة معينة.
- نفتح الـ Stream: بنحدد فيه الـ accuracy والـ distanceFilter (مثلاً كل ما يتحرك 10 متر ابعتلي تحديث)
- نحدث الخريطة: مع كل نقطة جديدة بنحرك الـ Marker بتاع اليوزر أو بنرسم الطريق تاني لو حابين
location_tracker.dart
void trackUserMovement() {
Geolocator.getPositionStream(
locationSettings: const LocationSettings(
accuracy: LocationAccuracy.high,
distanceFilter: 10,
),
).listen((Position position) {
final newUserPoint = GeoPoint(
latitude: position.latitude,
longitude: position.longitude,
);
mapController.goToLocation(newUserPoint);
print("اليوزر وصل هنا: ${position.latitude}, ${position.longitude}");
});
}ليه الطريقة دي جامدة؟
- الدقة: الـ
drawRoadبتستخدم بيانات OpenStreetMap وبترسم طريق حقيقي. - الكفاءة: الـ Geolocator stream خفيف جداً على البطارية لو ظبطت الـ
distanceFilterبشكل صحيح.