דף זה תורגם על ידי Cloud Translation API.

הגדרה של פרויקט Flutter

לפני שמגדירים פרויקט Flutter, חשוב לוודא שביצעתם את השלבים הנדרשים שמופיעים בקטע לפני שמתחילים. אחרי הפעלת החיוב ויצירת מפתח API, אפשר להגדיר את פרויקט Flutter שבו משתמשים כדי לפתח את האפליקציה.

שלב 1: מתקינים את התוכנה הנדרשת

כדי ליצור פרויקט באמצעות חבילת Google Maps for Flutter, צריך להתקין את Flutter SDK ולהגדיר את סביבת הפיתוח לפלטפורמת היעד. פרטים נוספים זמינים במדריך להתקנת Flutter.

שלב 2: מתקינים את חבילת Google Maps for Flutter בפרויקט חדש

‫Flutter מציעה את חבילת Google Maps for Flutter כפלאגין ל-Flutter.

יוצרים את פרויקט Flutter ומוסיפים את הפלאגין Maps.

יוצרים פרויקט חדש ב-Flutter באמצעות הפקודה `flutter create`:
```
  flutter create google_maps_in_flutter --platforms=android,ios,web
  
  Creating project google_maps_in_flutter...
  [Listing of created files elided]
  Wrote 127 files.

  All done!
```
קוד האפליקציה שלך נמצא ב-google_maps_in_flutter/lib/main.dart. כדי להריץ את האפליקציה, מקלידים:
```
  cd google_maps_in_flutter
  flutter run
```
האפליקציה הזו מיועדת ל-iOS, ל-Android ולאינטרנט. בשלב הזה, Google Maps SDK לא תומך באפליקציות למחשב מחוץ לדפדפן.

מוסיפים את הפלאגין של חבילת מפות Google ל-Flutter לפרויקט הזה.

flutter pub add google_maps_flutter
  
  Resolving dependencies...
  [Listing of dependencies elided]

  Changed 14 dependencies!

שלב 3: הגדרת גרסת הפלטפורמה

Android

מגדירים את גרסת ה-SDK המינימלית ל-Android.

פותחים את קובץ ההגדרות android/app/build.gradle בסביבת הפיתוח המשולבת (IDE) המועדפת.

משנים את הערך של android.defaultConfig.minSdkVersion ל-21:

  android {
    //...
    defaultConfig {
        applicationId "com.example.google_maps_in_flutter"
        minSdkVersion 21     // Set to 21
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
    //...
  }

כשמגדירים את defaultConfig, מציינים ApplicationID ייחודי משלכם.
מסנכרנים את השינויים בפרויקט עם Gradle.

iOS

הגדרת הגרסה המינימלית של פלטפורמת iOS.

פותחים את קובץ ההגדרות ios/Podfile בסביבת הפיתוח המשולבת (IDE) המועדפת.

מוסיפים את השורות הבאות לתחילת הקובץ Podfile:

  # Set platform to 14.0 to enable latest Google Maps SDK
  platform :ios, '14.0'

שלב 4: הוספת מפתח ה-API לפרויקט

בקטע לפני שמתחילים, יצרתם מפתח API לאפליקציה. עכשיו צריך להוסיף את המפתח הזה לפרויקט Flutter. ב-Flutter, צריך להוסיף את מפתח ה-API הזה לכל פלטפורמות היעד: iOS,‏ Android ואינטרנט.

בדוגמאות הבאות, מחליפים את הערך YOUR_API_KEY במפתח ה-API שלכם.

Android

כדי לייעל את המשימה הזו, מומלץ להשתמש בפלאגין של Secrets Gradle ל-Android.

כדי להתקין את הפלאגין Secrets Gradle ל-Android ולאחסן את מפתח ה-API:

ב-Android Studio, פותחים את הקובץ build.gradle ברמת הבסיס ומוסיפים את הקוד הבא לרכיב dependencies בקטע buildscript.

Groovy

buildscript {
    dependencies {
        // ...
        classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1"
    }
}

Kotlin

buildscript {
    dependencies {
        // ...
        classpath("com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1")
    }
}

פותחים את הקובץ build.gradle ברמת האפליקציה ומוסיפים את הקוד הבא לרכיב plugins.

Groovy

plugins {
    id 'com.android.application'
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}

Kotlin

plugins {
    id("com.android.application")
    // ...
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
}

אם אתם משתמשים ב-Android Studio, סנכרנו את הפרויקט עם Gradle.
פותחים את הקובץ local.properties בספרייה ברמת הפרויקט, ואז מוסיפים את הקוד הבא. מחליפים את הערך YOUR_API_KEY במפתח ה-API שלכם.
```
MAPS_API_KEY=YOUR_API_KEY
```
בקובץ AndroidManifest.xml, עוברים אל com.google.android.geo.API_KEY ומעדכנים את המאפיין android:value באופן הבא:
```
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />
    
```
הערה: ‫com.google.android.geo.API_KEY הוא שם המטא-נתונים המומלץ למפתח ה-API. אפשר להשתמש במפתח עם השם הזה כדי לבצע אימות למספר ממשקי API שמבוססים על מפות Google בפלטפורמת Android, כולל Flutter SDK. לצורך תאימות לאחור, ה-API תומך גם בשם com.google.android.maps.v2.API_KEY. השם הזה הוא מדור קודם ומאפשר אימות רק לגרסה 2 של Android Maps API. אפליקציה יכולה לציין רק אחד משמות המטא-נתונים של מפתח ה-API. אם מציינים את שניהם, ה-API זורק חריגה.

הערה: כמו שרואים למעלה, com.google.android.geo.API_KEY הוא שם המטא-נתונים המומלץ למפתח ה-API. אפשר להשתמש במפתח עם השם הזה כדי לבצע אימות למספר ממשקי API שמבוססים על מפות Google בפלטפורמת Android, כולל Flutter SDK. לצורך תאימות לאחור, ה-API תומך גם בשם com.google.android.maps.v2.API_KEY. השם הזה הוא מדור קודם ומאפשר אימות רק לגרסה 2 של Android Maps API. אפליקציה יכולה לציין רק אחד משמות המטא-נתונים של מפתח ה-API. אם מציינים את שניהם, ה-API זורק חריגה.

iOS

מוסיפים את מפתח ה-API לקובץ AppDelegate.swift.

פותחים את הקובץ ios/Runner/AppDelegate.swift בפרויקט Flutter באמצעות סביבת הפיתוח המשולבת (IDE) המועדפת.
מוסיפים את הצהרת הייבוא הבאה כדי להוסיף את חבילת מפות Google ל-Flutter לאפליקציה:

import GoogleMaps

מוסיפים את מפתח ה-API ל-application(_:didFinishLaunchingWithOptions:) method, ומחליפים את YOUR_API_KEY במפתח ה-API שלכם:
```
GMSServices.provideAPIKey("YOUR_API_KEY")
```
שומרים את קובץ ה-AppDelegate.swift וסוגרים אותו.

קובץ AppDelegate.swift המלא צריך להיראות כך:

import UIKit
import Flutter
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")

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

פיתוח אתרים

מוסיפים את מפתח ה-API לקובץ האפליקציה index.html.

פותחים את הקובץ web/index.html בפרויקט Flutter באמצעות סביבת הפיתוח המשולבת (IDE) המועדפת.

מוסיפים את תג הסקריפט הבא בתוך התג <head>, ומחליפים את YOUR_API_KEY במפתח ה-API שלכם.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

שומרים את קובץ ה-index.html וסוגרים אותו.

המקטע head המלא של index.html צריך להיראות כך:

    <head>
      <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">
      
      <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "YOUR_API_KEY",
          v: "weekly",
          // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
          // Add other bootstrap parameters as needed, using camel case.
          });
      </script>
      
      <title>google_maps_in_flutter</title>
      <link rel="manifest" href="manifest.json">
    </head>

שלב 5: הוספת מפה

בדוגמת הקוד הבאה אפשר לראות איך מוסיפים מפה פשוטה לאפליקציית Flutter חדשה.

פותחים את הקובץ lib/main.dart בפרויקט Flutter באמצעות סביבת הפיתוח המשולבת (IDE) המועדפת.

מוסיפים או מעדכנים אמצעי תשלום בשיטה הראשית שמוגדרת כברירת מחדל באפליקציה כדי ליצור מופע של mapController ולהפעיל אותו.

      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(-33.86, 151.20);
      
        void _onMapCreated(GoogleMapController controller) {
          mapController = controller;
        }
      
        @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,
                ),
              ),
            ),
          );
        }
      }

מפעילים אמולטורים או מכשירים שבהם רוצים להריץ את האפליקציה.
מריצים את האפליקציה. הפלט אמור להיראות כך:
```
  flutter run

   
    Multiple devices found:
    Android phone (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33) (emulator)
    iPhone (mobile)  • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
    Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.124
    [1]: Android phone
    [2]: iPhone
    [3]: Chrome
    
    Please choose one (To quit, press "q/Q"): 
```
מקלידים את המספר של הפלטפורמה שרוצים להפעיל. בכל פעם שמפעילים את flutter run, Flutter יציג את האפשרויות האלה. אם במערכת הפיתוח שלכם לא פועל אמולטור או מכשיר בדיקה מחובר, Flutter אמור לבחור לפתוח את Chrome.

בכל פלטפורמה צריכה להופיע מפה שבמרכזה סידני, אוסטרליה. אם המפה לא מוצגת, צריך לוודא שהוספתם את מפתח ה-API לפרויקט היעד המתאים.

השלבים הבאים

עכשיו, אחרי שיש לכם מפתח API ופרויקט Flutter, אתם יכולים ליצור ולהריץ אפליקציות. חבילת Google Maps for Flutter כוללת מדריכים רבים ואפליקציות לדוגמה שיכולים לעזור לכם להתחיל. מידע נוסף זמין במשאבים הבאים:

מדריך בנושא הוספת מפה עם סמן
Codelabs ל-Flutter עם הפלטפורמה של מפות Google
דוגמאות קוד ב-GitHub

הגדרה של פרויקט Flutter קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

שלב 1: מתקינים את התוכנה הנדרשת

שלב 2: מתקינים את חבילת Google Maps for Flutter בפרויקט חדש

שלב 3: הגדרת גרסת הפלטפורמה

Android

iOS

שלב 4: הוספת מפתח ה-API לפרויקט

Android

Groovy

Kotlin

Groovy

Kotlin

iOS

פיתוח אתרים

שלב 5: הוספת מפה

השלבים הבאים

הגדרה של פרויקט Flutter