หน้านี้ได้รับการแปลโดย Cloud Translation API

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

ก่อนตั้งค่าโปรเจ็กต์ Flutter โปรดตรวจสอบว่าคุณได้ทำตามขั้นตอนข้อกำหนดเบื้องต้นในส่วนก่อนเริ่มต้นแล้ว หลังจากเปิดใช้ การเรียกเก็บเงิน และสร้างคีย์ API แล้ว คุณจะตั้งค่าโปรเจ็กต์ Flutter ที่ใช้ในการ พัฒนาแอปได้

ขั้นตอนที่ 1: ติดตั้งซอฟต์แวร์ที่จำเป็น

หากต้องการสร้างโปรเจ็กต์โดยใช้แพ็กเกจ Google Maps สำหรับ Flutter คุณต้องติดตั้ง Flutter SDK และตั้งค่าสภาพแวดล้อมการพัฒนาสำหรับแพลตฟอร์มเป้าหมาย ดูรายละเอียดได้ที่คำแนะนำในการติดตั้ง Flutter

ขั้นตอนที่ 2: ติดตั้งแพ็กเกจ Google Maps สำหรับ Flutter ในโปรเจ็กต์ใหม่

Flutter มีแพ็กเกจ Google Maps สำหรับ 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 Maps สำหรับ 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

เราขอแนะนำให้ใช้ปลั๊กอินข้อมูลลับ Gradle สำหรับ Android เพื่อให้งานนี้มีประสิทธิภาพมากขึ้น

วิธีติดตั้งปลั๊กอินข้อมูลลับ Gradle สำหรับ Android ในโปรเจ็กต์ Google Maps

ใน Android Studio ให้เปิดไฟล์ build.gradle.kts หรือ build.gradle ระดับบนสุด แล้วเพิ่มโค้ดต่อไปนี้ลงในองค์ประกอบ dependencies ภายใน buildscript

Kotlin

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

ดึงดูด

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

เปิดไฟล์ build.gradle.kts หรือ build.gradle ระดับโมดูล แล้วเพิ่มโค้ดต่อไปนี้ลงในองค์ประกอบ plugins
Kotlin
```
plugins {
    // ...
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
}
```
ดึงดูด
```
plugins {
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}
```
ในไฟล์ build.gradle.kts หรือ build.gradle ระดับโมดูล ให้ตรวจสอบ ว่าตั้งค่า targetSdk และ compileSdk เป็น 34
ซิงค์โปรเจ็กต์กับ Gradle
เปิดไฟล์ secrets.properties ในไดเรกทอรีระดับบนสุด แล้วเพิ่มโค้ดต่อไปนี้ แทนที่ YOUR_API_KEY ด้วยคีย์ API ของคุณ โปรดจัดเก็บคีย์ไว้ในไฟล์นี้ เนื่องจากระบบจะไม่ตรวจสอบsecrets.properties ในระบบควบคุมเวอร์ชัน
หมายเหตุ: หากไม่มีไฟล์ secrets.properties ให้สร้างในโฟลเดอร์เดียวกับไฟล์ local.properties
```
MAPS_API_KEY=YOUR_API_KEY
```
สร้างไฟล์ local.defaults.properties ในไดเรกทอรีระดับบนสุด ซึ่งเป็นโฟลเดอร์เดียวกับไฟล์ secrets.properties แล้วเพิ่มโค้ดต่อไปนี้

หมายเหตุ: ป้อนรหัสตามที่แสดง อย่าแทนที่ DEFAULT_API_KEY ด้วยคีย์ API
```
MAPS_API_KEY=DEFAULT_API_KEY
```
จุดประสงค์ของไฟล์นี้คือการระบุตำแหน่งสำรองสำหรับคีย์ API ในกรณีที่ไม่พบไฟล์ secrets.properties เพื่อให้การสร้างไม่ล้มเหลว ปัญหานี้อาจเกิดขึ้นในกรณีต่อไปนี้ คุณโคลนแอปจากระบบควบคุมเวอร์ชันที่ละเว้น secrets.properties และ คุณยังไม่ได้สร้างไฟล์ secrets.properties ในเครื่องเพื่อระบุ คีย์ API
ในไฟล์ AndroidManifest.xml ให้ไปที่ com.google.android.geo.API_KEY แล้วอัปเดต android:value attribute หากไม่มีแท็ก <meta-data> ให้สร้างแท็กดังกล่าวเป็นแท็กย่อยของแท็ก <application>
```
<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 จะส่งข้อยกเว้น

ใน Android Studio ให้เปิดไฟล์ build.gradle.kts หรือ build.gradle ระดับโมดูล แล้วแก้ไขพร็อพเพอร์ตี้ secrets หากไม่มีพร็อพเพอร์ตี้ secrets ให้เพิ่ม

แก้ไขพร็อพเพอร์ตี้ของปลั๊กอินเพื่อตั้งค่า propertiesFileName เป็น secrets.properties ตั้งค่า defaultPropertiesFileName เป็น local.defaults.properties และตั้งค่าพร็อพเพอร์ตี้อื่นๆ

Kotlin

secrets {
    // To add your Maps API key to this project:
    // 1. If the secrets.properties file does not exist, create it in the same folder as the local.properties file.
    // 2. Add this line, where YOUR_API_KEY is your API key:
    //        MAPS_API_KEY=YOUR_API_KEY
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"
}

ดึงดูด

secrets {
    // To add your Maps API key to this project:
    // 1. If the secrets.properties file does not exist, create it in the same folder as the local.properties file.
    // 2. Add this line, where YOUR_API_KEY is your API key:
    //        MAPS_API_KEY=YOUR_API_KEY
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"
}

หมายเหตุ: ดังที่แสดงด้านบน 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

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

import GoogleMaps

เพิ่ม API ลงในเมธอด application(_:didFinishLaunchingWithOptions:) โดยแทนที่คีย์ API ด้วย YOUR_API_KEY
```
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> โดยแทนที่คีย์ API ของคุณด้วย YOUR_API_KEY

<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 สำหรับ Flutter มีบทแนะนำและแอปตัวอย่างมากมายที่ ช่วยให้คุณเริ่มต้นใช้งานได้ ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้

บทแนะนำการเพิ่มแผนที่พร้อมเครื่องหมาย
Codelab สำหรับ Flutter ด้วย Google Maps Platform
ตัวอย่างโค้ด ใน GitHub