ก่อนตั้งค่าโปรเจ็กต์ 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
หากต้องการเรียกใช้แอปพลิเคชัน ให้พิมพ์: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}" />
Note:
com.google.android.geo.API_KEY
is the recommended metadata name for the API key. A key with this name can be used to authenticate to multiple Google Maps-based APIs on the Android platform, including the Flutter SDK. For backwards compatibility, the API also supports the namecom.google.android.maps.v2.API_KEY
. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception. -
In Android Studio, open your module-level
build.gradle.kts
orbuild.gradle
file and edit thesecrets
property. If thesecrets
property does not exist, add it.Edit the properties of the plugin to set
propertiesFileName
tosecrets.properties
, setdefaultPropertiesFileName
tolocal.defaults.properties
, and set any other 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
- เปิดไฟล์
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2024-09-05 UTC