ตั้งค่าโครงการ Flutter

Android

ตั้งค่าเวอร์ชัน SDK ขั้นต่ำสำหรับ Android

1. เปิดไฟล์การกำหนดค่า android/app/build.gradle ใน IDE ที่ต้องการ
2. เปลี่ยนค่า 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
       }
       //...
     }

3. เมื่อกำหนดค่า defaultConfig ให้ระบุ ApplicationID ที่ไม่ซ้ำกันของคุณเอง
4. ซิงค์การเปลี่ยนแปลงโปรเจ็กต์กับ Gradle

iOS

ตั้งค่าเวอร์ชันแพลตฟอร์ม iOS ขั้นต่ำ

1. เปิดไฟล์การกำหนดค่า ios/Podfile ใน IDE ที่ต้องการ
2. เพิ่มบรรทัดต่อไปนี้ที่จุดเริ่มต้นของ Podfile นี้

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

Android

เราขอแนะนำให้คุณใช้ ปลั๊กอินข้อมูลลับ Gradle สำหรับ Android เพื่อลดความซับซ้อนของงานนี้

วิธีติดตั้งปลั๊กอินข้อมูลลับ Gradle สำหรับ Android และจัดเก็บคีย์ API

1. ใน 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")
       }
   }

2. เปิดไฟล์ 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")
   }

3. หากใช้ Android Studio ให้ ซิงค์โปรเจ็กต์กับ Gradle
4. เปิดไฟล์ local.properties ในไดเรกทอรีระดับโปรเจ็กต์ แล้วเพิ่ม โค้ดต่อไปนี้ แทนที่ YOUR_API_KEY ด้วยคีย์ API ของคุณ

   MAPS_API_KEY=YOUR_API_KEY

5. ในไฟล์ 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 Maps ในแพลตฟอร์ม Android รวมถึง Flutter SDK นอกจากนี้ API ยังรองรับชื่อ com.google.android.maps.v2.API_KEY เพื่อให้เข้ากันได้กับรุ่นก่อนหน้า ชื่อเดิมนี้ อนุญาตให้ตรวจสอบสิทธิ์กับ Android Maps API v2 เท่านั้น แอปพลิเคชันสามารถ ระบุชื่อข้อมูลเมตาของคีย์ API ได้เพียงชื่อเดียว หากระบุทั้ง 2 ชื่อ API จะแสดงข้อยกเว้น

หมายเหตุ: ดังที่แสดงไว้ข้างต้น com.google.android.geo.API_KEY คือชื่อข้อมูลเมตาที่แนะนำ สำหรับคีย์ API คุณสามารถใช้คีย์ที่มีชื่อนี้เพื่อตรวจสอบสิทธิ์กับ API หลายรายการที่อิงตาม Google Maps ในแพลตฟอร์ม Android รวมถึง Flutter SDK นอกจากนี้ API ยังรองรับชื่อ com.google.android.maps.v2.API_KEY เพื่อให้เข้ากันได้กับรุ่นก่อนหน้า ชื่อเดิมนี้อนุญาตให้ตรวจสอบสิทธิ์กับ Android Maps API v2 เท่านั้น แอปพลิเคชันสามารถ ระบุชื่อข้อมูลเมตาของคีย์ API ได้เพียงชื่อเดียว หากระบุทั้ง 2 ชื่อ API จะแสดงข้อยกเว้น

iOS

เพิ่มคีย์ API ลงในไฟล์ AppDelegate.swift

1. เปิดไฟล์ ios/Runner/AppDelegate.swift ในโปรเจ็กต์ Flutter ด้วย IDE ที่ต้องการ
2. เพิ่มคำสั่งนำเข้าต่อไปนี้เพื่อเพิ่มแพ็กเกจ Google Maps สำหรับ Flutter ลงในแอป

import GoogleMaps

3. เพิ่ม API ลงในเมธอด application(_:didFinishLaunchingWithOptions:) โดยแทนที่ YOUR_API_KEY ด้วยคีย์ API

   GMSServices.provideAPIKey("YOUR_API_KEY")

4. บันทึกและปิดไฟล์ 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

1. เปิดไฟล์ web/index.html ในโปรเจ็กต์ Flutter ด้วย IDE ที่ต้องการ
2. เพิ่มแท็กสคริปต์ต่อไปนี้ภายในแท็ก <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>

3. บันทึกและปิดไฟล์ 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>