تحديد جزء معين في خريطة جوجل في Flutter بطريقة مخصصة مع إمكانية منع تحديد العنوان

تحديد جزء معين في الخريطة بطريقة مخصصه مع امكانية منع تحديد العنوان

في هذا المقال سوف نشرح معكم كيف تقوم بتحديد جزء معين من الخريطة في مشروعك في Flutter مع امكانية اضافة مؤشر واذا كان المؤشر بداخل المنطقة التي قمت بتحديدها سوف يعمل واذا لم يكون في المنطقه التي تقوم بتحديدها فلن يعمل المؤشر وهذا ما سوف نقوم به اليوم كما هو موضح بالصورة المصغره الخاصه بالمقال والامر بسيط جدا جدا كل ما سوف نحتاجه هو ان يكون لديك api key حتى تعمل معك الخرائط بدون مشاكل وبعدها لن تحتاج الى لتثبيت بعض المكتبات التي نقدمها لكم في الاسفل كما هو موضح بعد التثبيت يمكنك اتباع الخطوات التي نقوم بها حتى تصل الى النتيحة النهائيه بدون اي مشاكل .

يمكّنك إطار عمل Flutter مفتوح المصدر من Google من إنشاء تطبيقات متعددة الأنظمة الأساسية ومُصممة محليًا من قاعدة شفرة واحدة. أهداف النظام الأساسي الستة التي يدعمها Flutter 3 هي تطبيقات الويب و Windows و macOS و iOS و Android و iOS.

الإطار المعاصر المستخدم لإنشاء أدوات Flutter تأثر بـ React. تعد أدوات النص ، وتخطيطات الصفوف والأعمدة من Flexbox ، وتخطيطات تحديد المواقع المطلقة المكدسة ، وعناصر واجهة المستخدم الموضوعة ، وعناصر واجهة المستخدم الحاوية هي أكثر الأدوات والتخطيطات شيوعًا ، 

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

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

برمجة جوجل:

تقدم جوجل مجموعة واسعة من الأدوات والتقنيات التي تساعد المطورين على إنشاء تطبيقات ذكية، بما في ذلك خرائط جوجل. يمكن استخدام خرائط جوجل لإنشاء تطبيقات متنوعة، مثل تطبيقات التنقل والتوصيل وتطبيقات العلامات التجارية والإعلانات.

برمجة تطبيقات الأجهزة الذكية:

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

إنشاء تطبيقات الاندرويد:

يمكن استخدام فلاتر لإنشاء تطبيقات أندرويد وiOS. فلاتر هي تقنية تطوير تطبيقات ذكية مفتوحة المصدر من جوجل، تعتمد على لغة البرمجة دارت.

برمجة تطبيقات الاجهزة الذكية:

تتضمن برمجة تطبيقات الأجهزة الذكية مجموعة من الخطوات، مثل:

• تصميم التطبيق: يتضمن هذه الخطوة تحديد وظائف التطبيق وتصميم واجهة المستخدم.
• تطوير التطبيق: يتضمن هذه الخطوة كتابة الكود وتنفيذه.
• اختبار التطبيق: يتضمن هذه الخطوة اختبار التطبيق للتأكد من سلامة عمله.
• نشر التطبيق: يتضمن هذه الخطوة نشر التطبيق على متجر التطبيقات.

برمجة تطبيق اندرويد بسيط:

يمكن إنشاء تطبيق اندرويد بسيط باستخدام فلاتر من خلال الخطوات التالية:

1. إنشاء مشروع جديد باستخدام فلاتر.
2. إضافة مكتبة خرائط جوجل إلى المشروع.
3. إنشاء الخريطة وإضافة المواقع إليها.
4. تشغيل التطبيق على جهاز أندرويد.

يعد التعامل مع خرائط جوجل باستخدام فلاتر طريقة رائعة لإنشاء تطبيقات ذكية تفاعلية. فلاتر هي تقنية قوية وسهلة الاستخدام، يمكن استخدامها لإنشاء تطبيقات متنوعة للأجهزة الذكية.

الميزات والأدوات المتوفرة في خرائط جوجل:

• التنقل
• البحث
• عرض التضاريس
• عرض الصور
• عرض الاتجاهات
• عرض المسافات
• عرض الوقت المقدر للوصول
• خطوات استخدام خرائط جوجل في فلاتر:

أمثلة لتطبيقات اندرويد التي تستخدم خرائط جوجل:

• تطبيقات التنقل
• تطبيقات التوصيل
• تطبيقات العلامات التجارية والإعلانات
• تطبيقات السياحة والسفر
• تطبيقات التعليم
• تطبيقات الألعاب

نصائح لبرمجة تطبيقات اندرويد باستخدام فلاتر:

• استخدام مكتبة خرائط جوجل الرسمية.
• اختيار لغة البرمجة المناسبة للمشروع.
• تصميم واجهة مستخدم جذابة وسهلة الاستخدام.
• اختبار التطبيق بعناية قبل نشره.

add package :

  google_maps_flutter: ^2.2.1

  maps_toolkit: ^2.0.1

How to delect specific location in Flutter project

افتح موقع google maps وبعدها حدد النقاط التي تريد ان تكون على الخريطة وضعها بداخل list كما هو موضح بالكود التالي الامر بسيط جدا جدا وسهل القيام به وبعدها سوف نحتاج الى مكتبة maps_toolkit حتلا نتمكن من التعامل مع احداثيات الموقع والمؤشر اذا كان بداخل النقاط ام خارجها وبناء عليه نظهر المؤشر ام لا .

ui.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart'; 
import 'package:maps_toolkit/maps_toolkit.dart' as maps_toolkit;

class MapsPage extends StatefulWidget {
  const MapsPage({Key? key}) : super(key: key);

  @override
  State<MapsPage> createState() => _MapsPageState();
}

class _MapsPageState extends State<MapsPage> {
  final Completer<GoogleMapController> _controller = Completer();
  BitmapDescriptor customMarker = BitmapDescriptor.defaultMarker;
  LatLng initLocation = const LatLng(30.741486, 31.450343);
  bool isInSelectedArea = true;

  List<LatLng> polygonPoint = const [
   LatLng(30.741807, 31.449935),
   LatLng(30.741883, 31.450409),
   LatLng(30.741235, 31.450798),
   LatLng(30.741058, 31.450189),
  ];

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

  void checkUpdateLocation(LatLng latLng) {
    List<maps_toolkit.LatLng> convert =
        polygonPoint.map((e) => maps_toolkit.LatLng(e.latitude,e.longitude)).toList();

    setState(() {
      isInSelectedArea = maps_toolkit.PolygonUtil.containsLocation(
        maps_toolkit.LatLng(latLng.latitude, latLng.longitude),
        convert,
        false,
      );
    });
  }

  void addCustomMarker() {
    BitmapDescriptor.fromAssetImage(const ImageConfiguration(),
    'assets/img/map/marker-1.png'
    ).then((value) => setState(() {
      customMarker = value;
    }));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Maps'),
      ),
      body: Column(
        children: [
          Expanded(child: GoogleMap(
            initialCameraPosition: CameraPosition(
              target: initLocation,
              zoom: 10.6746,
            ),
            onMapCreated: (controller) {
              _controller.complete(controller);
            },
            markers: {
              Marker(
                markerId: const MarkerId('id-1'),
                position: initLocation,
                icon: customMarker,
                infoWindow: const InfoWindow(
                  title: 'Marker Title',
                  snippet: 'Marker Snippet',
                ),

                // enable change position market after on long click
                draggable: true,
                onDragEnd: (value) {
                  // print(value);
                  checkUpdateLocation(value);
                },

              ),
            },
            
            // circles: {
            //   Circle(
            //     circleId: const CircleId('id-1'),
            //     center: initLocation,
            //     radius: 430,
            //     fillColor: Colors.blueAccent.withOpacity(0.2),
            //     strokeWidth: 2,
            //   ),
            // },
            
            polygons: {
              Polygon(
                polygonId: const PolygonId('id-1'),
                points: polygonPoint,
                fillColor: Colors.blueAccent.withOpacity(0.2),
                strokeColor: Colors.blueAccent.withOpacity(0.2),
              ),
            },
          )),
          SizedBox(
            width: double.infinity,
            height: 60,
            child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                ),
                onPressed: isInSelectedArea ? (){} : null,
                child: Text('Select poisition')),
          ),
          // const AddressInfo()
        ],
      ),
    );
  }
}

android sdk manager تحميل flutter developers applications create app android android studio mac