افزودن نقشه با نشانگر

مقدمه

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

درحال دریافت کد

مخزن نمونه‌های Flutter را شبیه‌سازی یا بارگیری کنید. نمونه کد را می‌توانید در دایرکتوری google_maps پیدا کنید.

راه‌اندازی پروژه توسعه شما

پیش‌از ادامه دادن این موضوع، مطمئن شوید مراحل ذکرشده در راهنمای راه‌اندازی پروژه Flutter را تکمیل کرده‌اید.

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

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

import 'package:google_maps_flutter/google_maps_flutter.dart';

۲. افزودن 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 تعیین می‌کند نشانگر در کجا روی نقشه ظاهر شود.

۳. درحال ساختن و اجرای برنامه

برنامه Flutter را بااستفاده از یکی از گزینه‌های زیر شروع کنید:

1. از IDE، روی دکمه Run کلیک کنید
2. از خط فرمان، flutter run را اجرا کنید.

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

عیب‌یابی

• اگر نقشه‌ای نمی‌بینید، بررسی کنید که کلید میانای برنامه‌سازی کاربردی را دریافت کرده و آن را به برنامه اضافه کرده باشید.
• اگر از شناسه بسته iOS برای محدود کردن کلید API استفاده کرده‌اید، کلید را ویرایش کنید تا شناسه بسته برنامه را اضافه کنید: com.google.examples.map-with-marker.
• مطمئن شوید که اتصال Wi-Fi یا GPS خوبی دارید.
• برای مشاهده گزارش‌ها و اشکال‌زدایی برنامه، از Flutter DevTools استفاده کنید.
• می‌توانید درباره اجرای برنامه Flutter بیشتر بدانید.

۴. درک کردن کد

این کد را می‌توانید در 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 برای Flutter محتوای پنجره اطلاعات را وقتی کاربر روی نشانگر تک‌ضرب می‌زند نمایش می‌دهد. اگر از رفتار پیش‌فرض راضی هستید، نیازی نیست شنونده کلیک برای نشانگر اضافه کنید.

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