إضافة خريطة باستخدام محدّد موقع

مقدمة

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

الحصول على الرمز

استنساخ عيّنات Flutter أو تنزيلها المستودع. العينة الرمز في دليل google_maps.

إعداد مشروع التطوير لديك

تأكَّد من إكمال الخطوات الموضّحة في مقالة إعداد مشروع Flutter. قبل المتابعة في هذا الموضوع.

1. استيراد حزمة "خرائط Google" لبرنامج Flutter

1. افتح ملف main.dart في بيئة التطوير المتكاملة التي تفضّلها.
2. تحقَّق من إضافة عبارة الاستيراد التالية إلى الملف:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. إضافة "خرائط Google" إلى تطبيق Flutter

في تطبيق "Scaffold" المصغّر، أضِف التطبيق المصغّر GoogleMap باسم الجسم.

GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)

• يصنف الخيار markerId محدّد الموقع الخاص بك.
• يحدّد الخيار position مكان ظهور محدّد الموقع على الخريطة.

3- إنشاء تطبيقك وتشغيله

شغِّل تطبيق Flutter باستخدام أحد الخيارات التالية:

1. من بيئة التطوير المتكاملة (IDE)، انقر على الزر "Run".
2. من سطر الأوامر، شغِّل flutter run.

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

تحديد المشاكل وحلّها

• إذا لم تظهر لك خريطة، تأكّد من أنّك حصلت على مفتاح واجهة برمجة التطبيقات وأضفته إلى التطبيق.
• إذا استخدمت معرِّف حزمة iOS لتقييد مفتاح واجهة برمجة التطبيقات، عليك تعديل المفتاح لإضافة معرِّف الحزمة للتطبيق: com.google.examples.map-with-marker.
• تأكَّد من توفُّر اتصال جيد بشبكة WiFi أو نظام تحديد المواقع العالمي.
• يمكنك استخدام Flutter DevTools للاطّلاع على السجلّات وتصحيح أخطاء التطبيق.
• يمكنك معرفة المزيد من المعلومات حول تشغيل تطبيق Flutter.

4. فهم التعليمة البرمجية

يمكن العثور على هذا الرمز على GitHub.

1. استيراد الحزم اللازمة وإعداد التطبيق.

      import 'package:flutter/material.dart';
      import 'package:google_maps_flutter/google_maps_flutter.dart';
   
      void main() => runApp(const MyApp());
   
      class MyApp extends StatefulWidget {
      const MyApp({super.key});
   
      @override
         State<MyApp> createState() => _MyAppState();
      }

2. إنشاء خريطة في مركز مدينة سيدني بأستراليا.

   class _MyAppState extends State<MyApp> {
      
      late GoogleMapController mapController;
      
      final LatLng _center = const LatLng(-33.86, 151.20);
      
      void _onMapCreated(GoogleMapController controller) {
         mapController = controller;
      }

3. أضف التطبيقات المصغّرة اللازمة لعرض خريطة في أحد التطبيقات.

   @override
   Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Maps Sample App'),
             backgroundColor: Colors.green[700],
           ),
           body: GoogleMap(
               onMapCreated: _onMapCreated,
               initialCameraPosition: CameraPosition(
                 target: _center,
                 zoom: 11.0,
               ), // CameraPosition
           ), // GoogleMap
         ), // Scaffold
       ); // MaterialApp
     }
   }

4. إضافة أدوات العلامات لإضافة الأداة إلى تطبيقك.

      body: GoogleMap(
         onMapCreated: _onMapCreated,
         initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
         ),
         markers: {
            const Marker(
                  markerId: const MarkerId("Sydney"),
                  position: LatLng(-33.86, 151.20),
               ), // Marker
         }, // markers
      ), // GoogleMap
      ...

5. أضف نافذة معلومات إلى العلامة.

         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
               infoWindow: InfoWindow(
                  title: "Sydney",
                  snippet: "Capital of New South Wales",
               ), // InfoWindow
         ), //Marker
         ...

   تعرض حزمة "خرائط Google" لبرنامج Flutter محتوى المعلومات تلقائيًا. النافذة عندما ينقر المستخدم على علامة. ما مِن حاجة إلى إضافة أداة استماع للنقرات لعلامة التحديد إذا كنت ترغب في استخدام السلوك الافتراضي.

تهانينا! أنشأت تطبيق Flutter يعرض خريطة Google للإشارة إلى موقع معين وتقديم معلومات إضافية نافذة معلومات. لقد تعرَّفت أيضًا على كيفية استخدام حزمة "خرائط Google" لبرنامج Flutter.