新增包含標記的地圖

簡介

範例：含標記的地圖

本教學課程說明如何在 Flutter 應用程式中加入 Google 地圖。地圖中包含一個標記 (也稱為圖釘)，用以表示特定位置。

取得程式碼

複製或下載 Flutter 範例存放區。您可以在 google_maps 目錄中找到程式碼範例。

設定開發專案

請先確認您已完成「設定 Flutter 專案」指南中所列的步驟，再繼續這個課程。

1. 匯入 Google Maps for Flutter 套件

  1. 在想用的 IDE 中開啟 main.dart 檔案。
  2. 確認已將下列匯入陳述式加進檔案：
import 'package:google_maps_flutter/google_maps_flutter.dart';

2. 在 Flutter 應用程式中加入 Google 地圖

在 Scaffold 小工具內，將 GoogleMap 小工具新增為主體。 

GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)

  • markerId 選項會為您的標記加上標籤。
  • position 選項會設定標記在地圖上的位置。

3. 建構並執行應用程式

使用下列其中一個選項啟動 Flutter 應用程式：

  1. 在您的 IDE 中點選 Run 按鈕
  2. 在指令列中執行 flutter run。

您應該會看到以澳洲東海岸的雪梨為中心的地圖，上面有一個標記，與本頁中的圖片類似。

疑難排解

  • 如未看到地圖，請檢查是否已取得 API 金鑰，並加入應用程式。
  • 如果您使用 iOS 軟體包 ID 限制 API 金鑰，請編輯金鑰，加入應用程式的軟體包 ID：com.google.examples.map-with-marker。
  • 確認您的 Wi-Fi 或 GPS 連線品質良好。
  • 使用 Flutter 開發人員工具查看記錄檔並為應用程式偵錯。
  • 如要進一步瞭解如何執行 Flutter 應用程式，請參閱本文。

4. 瞭解程式碼

您可以在 GitHub 找到這個程式碼。

  1. 匯入必要的套件，並將應用程式初始化。 
       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();
           }
  2. 製作以澳洲雪梨為中心的地圖。
    class _MyAppState extends State<MyApp> {
       
       late     GoogleMapController mapController;
       
           final LatLng _center = const LatLng(-33.86, 151.20);
       
           void _onMapCreated(GoogleMapController controller) {
          mapController     = controller;
           }
  3. 新增在應用程式中顯示地圖所需的小工具。 
    @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,
                    ), // CameraPosition
                ), // GoogleMap
              ), // Scaffold
            ); // MaterialApp
          }
    }
  4. 新增 markers 小工具，再將小工具加進應用程式。 
       body: GoogleMap(
          onMapCreated    : _onMapCreated,
          initialCameraPosition    : CameraPosition(
             target    : _center,
             zoom    : 11.0,
              ),
          markers    : {
                 const Marker(
                   markerId    : const MarkerId("Sydney"),
                   position    : LatLng(-33.86, 151.20),
                    ), // Marker
              }, // markers
           ), // GoogleMap
           ...
  5. 為標記新增資訊視窗。
          const Marker(
                markerId    : const MarkerId("Sydney"),
                position    : LatLng(-33.86, 151.20),
                infoWindow    : InfoWindow(
                   title    : "Sydney",
                   snippet    : "Capital of New South Wales",
                    ), // InfoWindow
              ), //Marker
              ...
     根據預設，Google Maps for Flutter 套件會在使用者輕觸標記時顯示資訊視窗的內容。如果您可以接受使用預設行為，就不需要為標記新增點擊事件監聽器。

恭喜！您已經建構了一個能顯示 Google 地圖，且有標記指出特定位置的 Flutter 應用程式，這個應用程式會在資訊視窗中提供額外資訊。此外，您也學會如何使用 Google Maps for Flutter 套件。