Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Thiết lập dự án Flutter

Trước khi thiết lập dự án Flutter, hãy nhớ hoàn tất các bước tiên quyết trong phần Trước khi bắt đầu. Sau khi bạn bật tính năng thanh toán và tạo khoá API, bạn có thể thiết lập dự án Flutter mà bạn dùng để phát triển ứng dụng.

Bước 1: Cài đặt phần mềm bắt buộc

Để tạo dự án bằng gói Google Maps cho Flutter, bạn phải cài đặt SDK Flutter và thiết lập môi trường phát triển cho nền tảng mục tiêu. Hãy xem hướng dẫn cài đặt Flutter để biết thông tin chi tiết.

Bước 2: Cài đặt gói Google Maps cho Flutter trong một dự án mới

Flutter cung cấp gói Google Maps cho Flutter dưới dạng một trình bổ trợ Flutter.

Tạo dự án Flutter và thêm trình bổ trợ Maps.

Tạo dự án Flutter mới bằng `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!
```
Mã xử lý ứng dụng của bạn nằm trong google_maps_in_flutter/lib/main.dart. Để chạy ứng dụng, hãy nhập:
```
  cd google_maps_in_flutter
  flutter run
```
Ứng dụng này nhắm đến iOS, Android và Web. SDK Google Maps hiện không hỗ trợ các ứng dụng dành cho máy tính bên ngoài trình duyệt.

Thêm trình bổ trợ gói Google Maps cho Flutter vào dự án này.

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

  Changed 14 dependencies!

Bước 3: Đặt phiên bản nền tảng

Android

Đặt phiên bản SDK tối thiểu cho Android.

Mở tệp cấu hình android/app/build.gradle trong IDE mà bạn muốn.

Thay đổi giá trị của android.defaultConfig.minSdkVersion thành 21:

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

Khi định cấu hình defaultConfig, hãy chỉ định ApplicationID riêng của bạn.
Đồng bộ hoá các thay đổi trong dự án với Gradle.

iOS

Đặt phiên bản nền tảng iOS tối thiểu.

Mở tệp cấu hình ios/Podfile trong IDE mà bạn muốn.

Thêm các dòng sau vào đầu Podfile này:

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

Bước 4: Thêm khoá API vào dự án

Trong phần Trước khi bắt đầu, bạn đã tạo khoá API cho ứng dụng của mình. Giờ hãy thêm khoá đó vào dự án Flutter. Đối với Flutter, bạn nên thêm khoá API này vào tất cả các nền tảng mục tiêu: iOS, Android và Web.

Trong các ví dụ sau, hãy thay thế YOUR_API_KEY bằng khoá API của bạn.

Android

Để đơn giản hoá tác vụ này, bạn nên sử dụng Trình bổ trợ Secrets Gradle cho Android.

Cách cài đặt Trình bổ trợ Secrets Gradle cho Android và lưu trữ khoá API:

Trong Android Studio, hãy mở tệp build.gradle.kts hoặc build.gradle ở cấp cao nhất rồi thêm mã sau vào khối plugins.

Kotlin

plugins {
    // ...
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin") version "2.0.1" apply false
}

Groovy

plugins {
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin' version '2.0.1' apply false
}

Mở tệp build.gradle.kts hoặc build.gradle ở cấp mô-đun rồi thêm mã sau vào phần tử plugins.

Kotlin

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

Groovy

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

Nếu bạn sử dụng Android Studio, hãy đồng bộ hoá dự án với Gradle.
Mở tệp secrets.properties trong thư mục cấp cao nhất, sau đó thêm mã sau. Thay thế YOUR_API_KEY bằng khoá API của bạn. Hãy nhớ thêm secrets.properties vào tệp .gitignore (hoặc loại trừ tệp này khỏi hệ thống quản lý phiên bản) để bạn không kiểm tra khoá API vào hệ thống quản lý phiên bản.
Lưu ý: Nếu tệp secrets.properties không tồn tại, hãy tạo tệp đó trong cùng thư mục với tệp local.properties.
```
MAPS_API_KEY=YOUR_API_KEY
```
Tạo tệp local.defaults.properties trong thư mục cấp cao nhất, cùng thư mục với tệp secrets.properties, sau đó thêm mã sau.

Lưu ý: Nhập mã như minh hoạ. Đừng thay thế DEFAULT_API_KEY bằng khoá API của bạn.
```
MAPS_API_KEY=DEFAULT_API_KEY
```
Mục đích của tệp này là cung cấp vị trí sao lưu cho khoá API nếu không tìm thấy tệp secrets.properties để các bản dựng không bị lỗi. Điều này có thể xảy ra nếu bạn sao chép ứng dụng từ một hệ thống kiểm soát phiên bản bỏ qua secrets.properties và bạn chưa tạo tệp secrets.properties cục bộ để cung cấp khoá API.
Trong tệp AndroidManifest.xml, hãy chuyển đến com.google.android.geo.API_KEY và cập nhật thuộc tính android:value như sau:
```
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />
    
```
Lưu ý: com.google.android.geo.API_KEY là tên siêu dữ liệu được đề xuất cho khoá API. Bạn có thể dùng khoá có tên này để xác thực cho nhiều API dựa trên Google Maps trên nền tảng Android, bao gồm cả SDK Flutter. Để tương thích ngược, API này cũng hỗ trợ tên com.google.android.maps.v2.API_KEY. Tên cũ này chỉ cho phép xác thực cho Android Maps API v2. Ứng dụng chỉ có thể chỉ định một trong các tên siêu dữ liệu khoá API. Nếu bạn chỉ định cả hai, API sẽ gửi một trường hợp ngoại lệ.

Trong Android Studio, hãy mở tệp ở cấp mô-đun build.gradle.kts hoặc build.gradle rồi chỉnh sửa thuộc tính secrets. Hãy thêm thuộc tính secrets nếu thuộc tính này không tồn tại.

Chỉnh sửa các thuộc tính của trình bổ trợ để đặt propertiesFileName thành "secrets.properties", đặt defaultPropertiesFileName thành "local.defaults.properties" và đặt mọi thuộc tính khác.

Kotlin

secrets {
    // To add your Maps API key to this project:
    // 1. If the secrets.properties file does not exist, create it in the root directory (the same folder as the root 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"
}

Groovy

secrets {
    // To add your Maps API key to this project:
    // 1. If the secrets.properties file does not exist, create it in the root directory (the same folder as the root 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"
}

Lưu ý: Như minh hoạ ở trên, com.google.android.geo.API_KEY là tên siêu dữ liệu được đề xuất cho khoá API. Bạn có thể dùng khoá có tên này để xác thực cho nhiều API dựa trên Google Maps trên nền tảng Android, bao gồm cả SDK Flutter. Để tương thích ngược, API này cũng hỗ trợ tên com.google.android.maps.v2.API_KEY. Tên cũ này chỉ cho phép xác thực cho Android Maps API v2. Ứng dụng chỉ có thể chỉ định một trong các tên siêu dữ liệu khoá API. Nếu bạn chỉ định cả hai, API sẽ gửi một trường hợp ngoại lệ.

iOS

Thêm khoá API vào tệp AppDelegate.swift.

Mở tệp ios/Runner/AppDelegate.swift trong dự án Flutter bằng IDE mà bạn muốn.
Thêm câu lệnh nhập sau để thêm gói Google Maps cho Flutter vào ứng dụng:

import GoogleMaps

Thêm API vào phương thức application(_:didFinishLaunchingWithOptions:), thay thế khoá API của bạn cho YOUR_API_KEY:
```
GMSServices.provideAPIKey("YOUR_API_KEY")
```
Lưu và đóng tệp AppDelegate.swift.

Tệp AppDelegate.swift hoàn chỉnh sẽ có dạng như sau:

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)
  }
}

Web

Thêm khoá API vào tệp ứng dụng index.html.

Mở tệp web/index.html trong dự án Flutter bằng IDE mà bạn muốn.

Thêm thẻ tập lệnh sau vào bên trong thẻ <head>, thay thế khoá API của bạn cho 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>

Lưu và đóng tệp index.html.

Phần head hoàn chỉnh của index.html sẽ có dạng như sau:

    <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>

Bước 5: Thêm bản đồ

Đoạn mã sau minh hoạ cách thêm bản đồ đơn giản vào ứng dụng Flutter mới.

Mở tệp lib/main.dart trong dự án Flutter bằng IDE mà bạn muốn.

Thêm hoặc cập nhật các phương thức trong phương thức chính mặc định của ứng dụng để tạo và khởi động một thực thể của 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,
                ),
              ),
            ),
          );
        }
      }

Khởi động mọi trình mô phỏng hoặc thiết bị mà bạn muốn chạy ứng dụng.
Chạy ứng dụng của bạn. Bạn sẽ thấy kết quả có dạng như sau:
```
  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"): 
```
Nhập số của nền tảng mà bạn muốn chạy. Mỗi khi bạn gọi flutter run, Flutter sẽ cung cấp cho bạn những lựa chọn này. Nếu hệ thống phát triển của bạn không có trình mô phỏng nào đang chạy hoặc thiết bị kiểm thử nào được kết nối, thì Flutter sẽ chọn mở Chrome.

Mỗi nền tảng sẽ hiển thị một bản đồ có trung tâm là Sydney, Úc. Nếu bạn không thấy bản đồ, hãy kiểm tra để đảm bảo bạn đã thêm khoá API vào dự án mục tiêu thích hợp.

Các bước tiếp theo

Giờ đây, bạn đã có khoá API và dự án Flutter, bạn có thể tạo và chạy ứng dụng. Gói Google Maps cho Flutter cung cấp nhiều hướng dẫn và ứng dụng mẫu có thể giúp bạn bắt đầu. Để tìm hiểu thêm, hãy xem các tài nguyên sau:

Hướng dẫn Thêm bản đồ có điểm đánh dấu
Codelabs cho Flutter với Google Maps Platform
Mã mẫu trên GitHub

Thiết lập dự án Flutter Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Bước 1: Cài đặt phần mềm bắt buộc

Bước 2: Cài đặt gói Google Maps cho Flutter trong một dự án mới

Bước 3: Đặt phiên bản nền tảng

Android

iOS

Bước 4: Thêm khoá API vào dự án

Android

Kotlin

Groovy

Kotlin

Groovy

Kotlin

Groovy

iOS

Web

Bước 5: Thêm bản đồ

Các bước tiếp theo

Thiết lập dự án Flutter