افزودن Google Maps به برنامه Flutter

1. مقدمه

Flutter SDK برنامه تلفن همراه گوگل برای ایجاد تجربیات بومی با کیفیت بالا در iOS و Android در زمان بی سابقه است.

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

چیزی که خواهی ساخت

در این کد لبه، شما یک برنامه موبایلی با Google Map با استفاده از Flutter SDK خواهید ساخت. برنامه شما:

  • نمایش نقشه گوگل
  • داده های نقشه را از یک وب سرویس بازیابی کنید
  • این داده ها را به عنوان نشانگر روی نقشه نمایش دهید

تصویری از یک برنامه فلاتر با نقشه گوگل که در شبیه ساز آیفون اجرا می شود و نمای کوه هایلایت شده است

فلاتر چیست؟

فلاتر دارای سه قابلیت اصلی است.

  • توسعه سریع : برنامه های Android و iOS خود را در میلی ثانیه با بارگذاری مجدد داغ Stateful بسازید.
  • رسا و انعطاف پذیر : به سرعت ویژگی ها را با تمرکز بر تجربیات کاربر نهایی بومی ارسال کنید.
  • عملکرد بومی در iOS و Android : ویجت‌های Flutter همه تفاوت‌های اساسی پلتفرم - مانند پیمایش، پیمایش، آیکون‌ها و فونت‌ها - را برای ارائه عملکرد کامل بومی ترکیب می‌کنند.

Google Maps دارای:

  • پوشش 99% جهان : با داده های قابل اعتماد و جامع برای بیش از 200 کشور و منطقه بسازید.
  • ۲۵ میلیون به‌روزرسانی روزانه : روی اطلاعات دقیق و هم‌زمان مکان حساب کنید.
  • ۱ میلیارد کاربر فعال ماهانه : با اطمینان زیرساخت Google Maps مقیاس کنید.

این لبه کد شما را در ایجاد تجربه Google Maps در یک برنامه Flutter برای iOS و Android راهنمایی می کند.

چیزی که یاد خواهید گرفت

  • چگونه یک اپلیکیشن فلاتر جدید بسازیم.
  • نحوه پیکربندی افزونه Google Maps Flutter.
  • نحوه افزودن نشانگرها به نقشه، با استفاده از داده های مکان از یک سرویس وب.

این آزمایشگاه کد روی افزودن نقشه گوگل به برنامه فلاتر تمرکز دارد. مفاهیم غیر مرتبط و بلوک‌های کد محو شده‌اند و برای شما ارائه می‌شوند تا به سادگی کپی و جای‌گذاری کنید.

دوست دارید از این کد لبه چه چیزی یاد بگیرید؟

من با موضوع جدید هستم و می خواهم یک مرور کلی خوب داشته باشم. من چیزی در مورد این موضوع می دانم، اما می خواهم یک تجدید نظر کنم. من به دنبال کدی برای استفاده در پروژه خود هستم. من به دنبال توضیح یک چیز خاص هستم.

2. محیط Flutter خود را تنظیم کنید

برای تکمیل این آزمایشگاه به دو نرم افزار نیاز دارید: Flutter SDK و یک ویرایشگر . این کد لبه اندروید استودیو را فرض می کند، اما می توانید از ویرایشگر دلخواه خود استفاده کنید.

شما می توانید این کد لبه را با استفاده از هر یک از دستگاه های زیر اجرا کنید:

  • یک دستگاه فیزیکی (اندروید یا iOS) به رایانه شما متصل شده و روی حالت توسعه دهنده تنظیم شده است.
  • شبیه ساز iOS (نیاز به نصب ابزار Xcode دارد.)
  • شبیه ساز اندروید (نیاز به راه اندازی در Android Studio دارد.)

3. شروع به کار

شروع کار با فلاتر

ساده ترین راه برای شروع با Flutter استفاده از ابزار خط فرمان flutter برای ایجاد تمام کدهای مورد نیاز برای یک تجربه شروع ساده است. 

$ flutter create google_maps_in_flutter --platforms android,ios,web
Creating project google_maps_in_flutter...
Resolving dependencies in `google_maps_in_flutter`... 
Downloading packages... 
Got dependencies in `google_maps_in_flutter`.
Wrote 81 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd google_maps_in_flutter
  $ flutter run

Your application code is in google_maps_in_flutter/lib/main.dart.

افزودن افزونه Google Maps Flutter به عنوان یک وابستگی

افزودن قابلیت اضافی به برنامه Flutter با استفاده از بسته‌های Pub آسان است. در این نرم افزار کد پلاگین Google Maps Flutter را با اجرای دستور زیر از فهرست پروژه معرفی می کنید. 

$ cd google_maps_in_flutter
$ flutter pub add google_maps_flutter
Resolving dependencies... 
Downloading packages... 
+ csslib 1.0.0
+ flutter_plugin_android_lifecycle 2.0.19
+ flutter_web_plugins 0.0.0 from sdk flutter
+ google_maps 7.1.0
+ google_maps_flutter 2.6.1
+ google_maps_flutter_android 2.8.0
+ google_maps_flutter_ios 2.6.0
+ google_maps_flutter_platform_interface 2.6.0
+ google_maps_flutter_web 0.5.7
+ html 0.15.4
+ js 0.6.7 (0.7.1 available)
+ js_wrapping 0.7.4
  leak_tracker 10.0.4 (10.0.5 available)
  leak_tracker_flutter_testing 3.0.3 (3.0.5 available)
  material_color_utilities 0.8.0 (0.11.1 available)
  meta 1.12.0 (1.14.0 available)
+ plugin_platform_interface 2.1.8
+ sanitize_html 2.1.0
+ stream_transform 2.1.0
  test_api 0.7.0 (0.7.1 available)
+ web 0.5.1
Changed 16 dependencies!
6 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

پیکربندی platform iOS

برای دریافت آخرین نسخه Google Maps SDK در iOS به حداقل نسخه پلتفرم iOS 14 نیاز دارید . بالای فایل پیکربندی ios/Podfile را به صورت زیر تغییر دهید.

ios/Podfile 

# Google Maps SDK requires platform version 14
# https://developers.google.com/maps/flutter-package/config#ios
platform :ios, '14.0'


# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

پیکربندی minSDK اندروید

برای استفاده از Google Maps SDK در Android نیاز به تنظیم minSdk روی 21 است . فایل پیکربندی android/app/build.gradle به صورت زیر تغییر دهید.

android/app/build.gradle 

android {
    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId = "com.example.google_maps_in_flutter"
        // Minimum Android version for Google Maps SDK
        // https://developers.google.com/maps/flutter-package/config#android
        minSdk = 21
        targetSdk = flutter.targetSdkVersion
        versionCode = flutterVersionCode.toInteger()
        versionName = flutterVersionName
    }

}

4. اضافه کردن نقشه های گوگل به برنامه

همه چیز در مورد کلیدهای API است

برای استفاده از Google Maps در برنامه Flutter خود، باید یک پروژه API را با پلتفرم Google Maps پیکربندی کنید، به دنبال آن Maps SDK برای Android با استفاده از کلید API ، Maps SDK برای iOS با استفاده از کلید API ، و Maps JavaScript API با استفاده از کلید API . با در دست داشتن کلیدهای API، مراحل زیر را برای پیکربندی برنامه‌های Android و iOS انجام دهید.

افزودن کلید API برای یک برنامه اندروید

برای افزودن یک کلید API به برنامه Android، فایل AndroidManifest.xml را در android/app/src/main ویرایش کنید. یک ورودی meta-data حاوی کلید API ایجاد شده در مرحله قبل در گره application اضافه کنید.

android/app/src/main/AndroidManifest.xml 

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="google_maps_in_flutter"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

        <!-- TODO: Add your Google Maps API key here -->
        <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR-KEY-HERE"/>

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:taskAffinity=""
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
    <!-- Required to query activities that can process text, see:
         https://developer.android.com/training/package-visibility and
         https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.

         In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
    <queries>
        <intent>
            <action android:name="android.intent.action.PROCESS_TEXT"/>
            <data android:mimeType="text/plain"/>
        </intent>
    </queries>
</manifest>

افزودن کلید API برای یک برنامه iOS

برای افزودن یک کلید API به برنامه iOS، فایل AppDelegate.swift را در ios/Runner ویرایش کنید. برخلاف اندروید، افزودن کلید API در iOS نیاز به تغییر در کد منبع برنامه Runner دارد. AppDelegate هسته تکی است که بخشی از فرآیند اولیه سازی برنامه است.

دو تغییر در این فایل ایجاد کنید. ابتدا یک دستور #import اضافه کنید تا هدرهای Google Maps را وارد کنید و سپس متد provideAPIKey() از GMSServices singleton را فراخوانی کنید. این کلید API به Google Maps امکان می دهد تا کاشی های نقشه را به درستی ارائه دهد.

ios/Runner/AppDelegate.swift 

import Flutter
import UIKit
import GoogleMaps                                          // Add this import

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Add your Google Maps API key
    GMSServices.provideAPIKey("YOUR-API-KEY")               // Add this line

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

افزودن یک کلید API برای یک برنامه وب

برای افزودن یک کلید API به برنامه وب، فایل index.html را در web ویرایش کنید. با کلید API خود یک مرجع به اسکریپت Maps JavaScript در قسمت head اضافه کنید.

web/index.html 

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="google_maps_in_flutter">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <!-- Add your Google Maps API key here -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>

  <title>google_maps_in_flutter</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script src="flutter_bootstrap.js" async></script>
</body>
</html>

قرار دادن نقشه روی صفحه

حالا وقت آن است که یک نقشه روی صفحه نمایش بگیرید. محتویات lib/main.dart را با موارد زیر جایگزین کنید.

lib/main.dart 

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();
}

class _MyAppState extends State<MyApp> {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

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

اجرای برنامه

برنامه Flutter را در iOS یا Android اجرا کنید تا یک نمای نقشه واحد را در مرکز پورتلند ببینید. از طرف دیگر، یک شبیه ساز اندروید یا یک شبیه ساز iOS را اجرا کنید. به راحتی می توانید مرکز نقشه را برای نشان دادن شهر خود یا جایی که برای شما مهم است تغییر دهید. 

$ flutter run

تصویری از یک برنامه Flutter با نقشه گوگل که در شبیه ساز آیفون اجرا می شود

تصویری از یک برنامه Flutter با نقشه گوگل که در شبیه ساز اندروید اجرا می شود

5. گوگل را روی نقشه قرار دهید

Google دفاتر بسیاری در سرتاسر جهان دارد، از آمریکای شمالی ، آمریکای لاتین ، اروپا ، آسیا و اقیانوسیه تا آفریقا و خاورمیانه . نکته خوب در مورد این نقشه ها، اگر آنها را بررسی کنید، این است که آنها یک نقطه پایانی API به راحتی قابل استفاده برای ارائه اطلاعات مکان دفتر در قالب JSON دارند. در این مرحله این مکان های اداری را روی نقشه قرار می دهید. در این مرحله از تولید کد برای تجزیه JSON استفاده خواهید کرد.

سه وابستگی Flutter جدید را به شرح زیر به پروژه اضافه کنید. بسته http را برای ایجاد آسان درخواست های HTTP، json_serializable و json_annotation برای اعلان ساختار شی برای نمایش اسناد JSON اضافه کنید، build_runner برای پشتیبانی از تولید کد اضافه کنید. 

$ flutter pub add http json_annotation json_serializable dev:build_runner
Resolving dependencies... 
Downloading packages... 
+ _fe_analyzer_shared 67.0.0 (68.0.0 available)
+ analyzer 6.4.1 (6.5.0 available)
+ args 2.5.0
+ build 2.4.1
+ build_config 1.1.1
+ build_daemon 4.0.1
+ build_resolvers 2.4.2
+ build_runner 2.4.9
+ build_runner_core 7.3.0
+ built_collection 5.1.1
+ built_value 8.9.2
+ checked_yaml 2.0.3
+ code_builder 4.10.0
+ convert 3.1.1
+ crypto 3.0.3
+ dart_style 2.3.6
+ file 7.0.0
+ fixnum 1.1.0
+ frontend_server_client 4.0.0
+ glob 2.1.2
+ graphs 2.3.1
+ http 1.2.1
+ http_multi_server 3.2.1
+ http_parser 4.0.2
+ io 1.0.4
  js 0.6.7 (0.7.1 available)
+ json_annotation 4.9.0
+ json_serializable 6.8.0
  leak_tracker 10.0.4 (10.0.5 available)
  leak_tracker_flutter_testing 3.0.3 (3.0.5 available)
+ logging 1.2.0
  material_color_utilities 0.8.0 (0.11.1 available)
  meta 1.12.0 (1.14.0 available)
+ mime 1.0.5
+ package_config 2.1.0
+ pool 1.5.1
+ pub_semver 2.1.4
+ pubspec_parse 1.2.3
+ shelf 1.4.1
+ shelf_web_socket 1.0.4
+ source_gen 1.5.0
+ source_helper 1.3.4
  test_api 0.7.0 (0.7.1 available)
+ timing 1.0.1
+ typed_data 1.3.2
+ watcher 1.1.0
+ web_socket_channel 2.4.5
+ yaml 3.1.2
Changed 42 dependencies!
8 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

تجزیه JSON با تولید کد

شاید متوجه شده باشید که داده‌های JSON که از نقطه پایانی API بازگردانده می‌شوند، ساختاری منظم دارند. تولید کد برای تجمیع آن داده ها به اشیایی که می توانید در کد استفاده کنید مفید خواهد بود.

در دایرکتوری lib/src ، یک فایل locations.dart ایجاد کنید و ساختار داده های JSON برگشتی را به صورت زیر شرح دهید:

lib/src/locations.dart

import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:http/http.dart' as http;
import 'package:json_annotation/json_annotation.dart';

part 'locations.g.dart';

@JsonSerializable()
class LatLng {
  LatLng({
    required this.lat,
    required this.lng,
  });

  factory LatLng.fromJson(Map<String, dynamic> json) => _$LatLngFromJson(json);
  Map<String, dynamic> toJson() => _$LatLngToJson(this);

  final double lat;
  final double lng;
}

@JsonSerializable()
class Region {
  Region({
    required this.coords,
    required this.id,
    required this.name,
    required this.zoom,
  });

  factory Region.fromJson(Map<String, dynamic> json) => _$RegionFromJson(json);
  Map<String, dynamic> toJson() => _$RegionToJson(this);

  final LatLng coords;
  final String id;
  final String name;
  final double zoom;
}

@JsonSerializable()
class Office {
  Office({
    required this.address,
    required this.id,
    required this.image,
    required this.lat,
    required this.lng,
    required this.name,
    required this.phone,
    required this.region,
  });

  factory Office.fromJson(Map<String, dynamic> json) => _$OfficeFromJson(json);
  Map<String, dynamic> toJson() => _$OfficeToJson(this);

  final String address;
  final String id;
  final String image;
  final double lat;
  final double lng;
  final String name;
  final String phone;
  final String region;
}

@JsonSerializable()
class Locations {
  Locations({
    required this.offices,
    required this.regions,
  });

  factory Locations.fromJson(Map<String, dynamic> json) =>
      _$LocationsFromJson(json);
  Map<String, dynamic> toJson() => _$LocationsToJson(this);

  final List<Office> offices;
  final List<Region> regions;
}

Future<Locations> getGoogleOffices() async {
  const googleLocationsURL = 'https://about.google/static/data/locations.json';

  // Retrieve the locations of Google offices
  try {
    final response = await http.get(Uri.parse(googleLocationsURL));
    if (response.statusCode == 200) {
      return Locations.fromJson(
          json.decode(response.body) as Map<String, dynamic>);
    }
  } catch (e) {
    if (kDebugMode) {
      print(e);
    }
  }

  // Fallback for when the above HTTP request fails.
  return Locations.fromJson(
    json.decode(
      await rootBundle.loadString('assets/locations.json'),
    ) as Map<String, dynamic>,
  );
}

هنگامی که این کد را اضافه کردید، IDE شما (اگر از آن استفاده می کنید) باید تعدادی squiggles قرمز را نشان دهد، زیرا به یک فایل خواهر و برادر موجود، locations.g.dart. این فایل تولید شده بین ساختارهای JSON تایپ نشده و اشیاء نامگذاری شده تبدیل می شود. با اجرای build_runner به صورت زیر آن را ایجاد کنید:

$ dart run build_runner build --delete-conflicting-outputs
[INFO] Generating build script...
[INFO] Generating build script completed, took 357ms

[INFO] Creating build script snapshot......
[INFO] Creating build script snapshot... completed, took 10.5s

[INFO] There was output on stdout while compiling the build script snapshot, run with `--verbose` to see it (you will need to run a `clean` first to re-snapshot).

[INFO] Initializing inputs
[INFO] Building new asset graph...
[INFO] Building new asset graph completed, took 646ms

[INFO] Checking for unexpected pre-existing outputs....
[INFO] Deleting 1 declared outputs which already existed on disk.
[INFO] Checking for unexpected pre-existing outputs. completed, took 3ms

[INFO] Running build...
[INFO] Generating SDK summary...
[INFO] 3.4s elapsed, 0/3 actions completed.
[INFO] Generating SDK summary completed, took 3.4s

[INFO] 4.7s elapsed, 2/3 actions completed.
[INFO] Running build completed, took 4.7s

[INFO] Caching finalized dependency graph...
[INFO] Caching finalized dependency graph completed, took 36ms

[INFO] Succeeded after 4.8s with 2 outputs (7 actions)

اکنون کد شما باید دوباره به صورت تمیز تجزیه و تحلیل شود. در مرحله بعد، باید فایل fallback locations.json مورد استفاده در تابع getGoogleOffices را اضافه کنیم. یکی از دلایل گنجاندن این بک گراند این است که داده های استاتیکی که در این تابع بارگذاری می شوند بدون سرصفحه های CORS ارائه می شوند و بنابراین در مرورگر وب بارگذاری نمی شوند. برنامه‌های Android و iOS Flutter به سربرگ CORS نیاز ندارند، اما دسترسی به داده‌های تلفن همراه در بهترین زمان ممکن است دشوار باشد.

در مرورگر خود به https://about.google/static/data/locations.json بروید و محتویات را در فهرست دارایی ذخیره کنید. همچنین می توانید از خط فرمان به صورت زیر استفاده کنید.

$ mkdir assets
$ cd assets
$ curl -o locations.json https://about.google/static/data/locations.json
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 30348  100 30348    0     0  75492      0 --:--:-- --:--:-- --:--:-- 75492

اکنون که فایل دارایی را دانلود کرده اید، آن را به بخش flutter فایل pubspec.yaml خود اضافه کنید.

pubspec.yaml

flutter:
  uses-material-design: true

  assets:
    - assets/locations.json

فایل main.dart را برای درخواست داده های نقشه تغییر دهید و سپس از اطلاعات برگشتی برای افزودن دفترها به نقشه استفاده کنید:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'src/locations.dart' as locations;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final Map<String, Marker> _markers = {};
  Future<void> _onMapCreated(GoogleMapController controller) async {
    final googleOffices = await locations.getGoogleOffices();
    setState(() {
      _markers.clear();
      for (final office in googleOffices.offices) {
        final marker = Marker(
          markerId: MarkerId(office.name),
          position: LatLng(office.lat, office.lng),
          infoWindow: InfoWindow(
            title: office.name,
            snippet: office.address,
          ),
        );
        _markers[office.name] = marker;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.green[700],
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Google Office Locations'),
          elevation: 2,
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: const CameraPosition(
            target: LatLng(0, 0),
            zoom: 2,
          ),
          markers: _markers.values.toSet(),
        ),
      ),
    );
  }
}

این کد چندین عملیات را انجام می دهد:

  • در _onMapCreated ، از کد تجزیه JSON از مرحله قبل استفاده می کند و await می ماند تا بارگیری شود. سپس از داده های برگردانده شده برای ایجاد Marker در داخل یک callback setState() استفاده می کند. هنگامی که برنامه نشانگرهای جدید دریافت کرد، setState پرچم Flutter را برای رنگ آمیزی مجدد صفحه نمایش می دهد و باعث می شود مکان های دفتر نمایش داده شوند.
  • نشانگرها در Map ذخیره می شوند که با ویجت GoogleMap مرتبط است. این نشانگرها را به نقشه صحیح پیوند می دهد. البته می‌توانید چندین نقشه داشته باشید و نشانگرهای مختلفی را در هر کدام نمایش دهید.

تصویری از یک برنامه فلاتر با نقشه گوگل که در شبیه ساز آیفون اجرا می شود و نمای کوه هایلایت شده است

در اینجا یک اسکرین شات از آنچه شما انجام داده اید است. اضافات جالب زیادی در این مرحله وجود دارد. به عنوان مثال، می‌توانید یک نمای فهرست از دفاتر اضافه کنید که وقتی کاربر روی دفتری کلیک می‌کند، نقشه را جابه‌جا می‌کند و بزرگ‌نمایی می‌کند، اما، همانطور که می‌گویند، این تمرین به خواننده واگذار می‌شود!

6. مراحل بعدی

تبریک می گویم!

شما نرم افزار کد را تکمیل کرده اید و یک برنامه فلاتر با نقشه گوگل ساخته اید! شما همچنین با یک وب سرویس JSON تعامل داشته اید.

سایر مراحل بعدی

این آزمایشگاه کد تجربه ای برای تجسم تعدادی از نقاط روی نقشه ایجاد کرده است. تعدادی از برنامه های تلفن همراه وجود دارند که بر اساس این قابلیت ساخته شده اند تا نیازهای مختلف کاربران را برآورده کنند. منابع دیگری نیز وجود دارد که می تواند به شما در ادامه این امر کمک کند: