การเพิ่มแผนที่ด้วยเครื่องหมาย

เกริ่นนำ

บทแนะนำนี้จะแสดงวิธีเพิ่มแผนที่ Google ลงในแอป Flutter แผนที่มีเครื่องหมายหรือเรียกอีกอย่างว่าหมุด เพื่อระบุตำแหน่งที่เจาะจง

กำลังรับรหัส

โคลนหรือดาวน์โหลดที่เก็บตัวอย่าง Flutter ดูโค้ดตัวอย่างได้ในไดเรกทอรี google_maps

การตั้งค่าโปรเจ็กต์การพัฒนาของคุณ

อย่าลืมทำตามขั้นตอนที่ระบุไว้ในคำแนะนำในการตั้งค่าโปรเจ็กต์ Flutter ก่อนดำเนินการต่อในหัวข้อนี้

1. นำเข้าแพ็กเกจ Google Maps สำหรับ Flutter

1. เปิดไฟล์ main.dart ใน IDE ที่ต้องการ
2. ยืนยันว่าได้เพิ่มคำสั่งนำเข้าต่อไปนี้ลงในไฟล์แล้ว

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. เพิ่ม Google Maps ลงในแอป Flutter

ในวิดเจ็ต 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 เพื่อจำกัดคีย์ API ให้แก้ไขคีย์เพื่อเพิ่มตัวระบุชุดของแอป: 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. เพิ่มวิดเจ็ตเครื่องหมายเพื่อเพิ่มวิดเจ็ตลงในแอป

      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 สำหรับ Flutter จะแสดงเนื้อหาของหน้าต่างข้อมูลเมื่อผู้ใช้แตะเครื่องหมาย คุณไม่จำเป็นต้องเพิ่ม Listener การคลิกสำหรับเครื่องหมาย หากยินดีที่จะใช้ลักษณะการทำงานเริ่มต้น

ยินดีด้วย คุณได้สร้างแอป Flutter ที่แสดงแผนที่ Google พร้อมเครื่องหมายเพื่อระบุตำแหน่งที่เจาะจงและให้ข้อมูลเพิ่มเติมในหน้าต่างข้อมูล และยังได้เรียนรู้วิธีใช้แพ็กเกจ Google Maps สำหรับ Flutter อีกด้วย