新增包含標記的地圖

簡介

範例：含標記的地圖

本教學課程說明如何在 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 套件。