ก่อนตั้งค่าโปรเจ็กต์ Flutter คุณต้องดำเนินการตามข้อกำหนดเบื้องต้นให้เสร็จสมบูรณ์ ขั้นตอนในส่วนก่อนเริ่มต้น หลังจากที่คุณเปิดใช้งาน การเรียกเก็บเงิน และสร้างคีย์ API คุณสามารถตั้งค่าโปรเจ็กต์ Flutter ที่คุณใช้เพื่อ พัฒนาแอปของคุณ
ขั้นตอนที่ 1: ติดตั้งซอฟต์แวร์ที่จำเป็น
หากต้องการสร้างโปรเจ็กต์โดยใช้แพ็กเกจ Google Maps for 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
หากต้องการเรียกใช้แอปพลิเคชัน ให้พิมพ์: แอปพลิเคชันนี้กำหนดเป้าหมาย iOS, Android และเว็บ ในขณะนี้ Google Maps SDK ไม่สนับสนุนแอปพลิเคชันบนเดสก์ท็อปนอกเบราว์เซอร์cd google_maps_in_flutter
flutter run
-
เพิ่มปลั๊กอินแพ็กเกจ 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
วิธีติดตั้งปลั๊กอิน Secrets 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
ถูกยกเว้นจากการเช็คอินในการควบคุมเวอร์ชัน ระบบMAPS_API_KEY=YOUR_API_KEY
- บันทึกไฟล์
-
สร้างไฟล์
local.defaults.properties
ในไดเรกทอรีระดับบนสุด เป็นไฟล์secrets.properties
แล้วเพิ่มโค้ดต่อไปนี้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 เพียงชื่อเดียว หากระบุไว้ทั้งคู่ 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" // Configure which keys should be ignored by the plugin by providing regular expressions. // "sdk.dir" is ignored by default. ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore" ignoreList.add("sdk.*") // Ignore all keys matching the regexp "sdk.*" }
ดึงดูด
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" // Configure which keys should be ignored by the plugin by providing regular expressions. // "sdk.dir" is ignored by default. ignoreList.add("keyToIgnore") // Ignore the key "keyToIgnore" ignoreList.add("sdk.*") // Ignore all keys matching the regexp "sdk.*" }
หมายเหตุ: ตามที่แสดงไว้ข้างต้น
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 เพียงชื่อเดียว หากระบุไว้ทั้งคู่ API
มีข้อยกเว้น
iOS
เพิ่มคีย์ API ลงในไฟล์ AppDelegate.swift
- เปิดไฟล์
ios/Runner/AppDelegate.swift
ในโปรเจ็กต์ Flutter ด้วย IDE ที่ต้องการ - เพิ่มข้อความการนำเข้าต่อไปนี้เพื่อเพิ่มแพ็กเกจ Google Maps สำหรับ Flutter ลงในแอป
- เพิ่ม API ลงในเมธอด
application(_:didFinishLaunchingWithOptions:)
โดยแทนที่คีย์ API สำหรับ YOUR_API_KEY:GMSServices.provideAPIKey("YOUR_API_KEY")
- บันทึกและปิดไฟล์
AppDelegate.swift
import GoogleMaps
ไฟล์ 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 with Google Maps Platform
- ตัวอย่างโค้ด ใน GitHub