اضافه کردن نقشه با نشانگر

معرفی

این آموزش به شما نشان می دهد که چگونه یک نقشه گوگل را به برنامه Flutter خود اضافه کنید. این نقشه شامل یک نشانگر است که پین ​​نیز نامیده می شود تا مکان خاصی را نشان دهد.

دریافت کد

مخزن نمونه فلاتر را کلون یا دانلود کنید. کد نمونه را می توان در فهرست راهنمای google_maps یافت.

راه اندازی پروژه توسعه خود

قبل از ادامه این موضوع مطمئن شوید که مراحل ذکر شده در راهنمای پروژه راه اندازی فلاتر را تکمیل کرده اید.

1. بسته Google Maps for Flutter را وارد کنید

1. فایل main.dart خود را در IDE دلخواه خود باز کنید.
2. بررسی کنید که عبارت import زیر به فایل اضافه شده است:

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Google Maps را به برنامه 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 اجرا کنید.

شما باید نقشه ای را با یک نشانگر در مرکز سیدنی در ساحل شرقی استرالیا، مشابه تصویر این صفحه ببینید.

عیب یابی

• اگر نقشه‌ای را نمی‌بینید، بررسی کنید که یک کلید API دریافت کرده‌اید و آن را به برنامه اضافه کرده‌اید.
• اگر از شناسه بسته iOS برای محدود کردن کلید API استفاده کرده‌اید، کلید را ویرایش کنید تا شناسه بسته برای برنامه اضافه شود: com.google.examples.map-with-marker .
• اطمینان حاصل کنید که اتصال WiFi یا GPS خوبی دارید.
• از 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 Maps for Flutter محتوای پنجره اطلاعات را زمانی که کاربر روی یک نشانگر ضربه می‌زند، نمایش می‌دهد. اگر از رفتار پیش‌فرض راضی هستید، نیازی به افزودن یک کلیک شنونده برای نشانگر نیست.

تبریک می گویم! شما یک برنامه Flutter ساخته اید که نقشه گوگل را با یک نشانگر برای نشان دادن یک مکان خاص و ارائه اطلاعات اضافی در پنجره اطلاعات نمایش می دهد. همچنین نحوه استفاده از بسته Google Maps for Flutter را یاد گرفته اید.