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

บทนำ

บทแนะนำนี้จะแสดงวิธีเพิ่ม Google Maps ลงในแอป 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. คลิกปุ่ม Run จาก IDE
2. เรียกใช้ flutter run จากบรรทัดคำสั่ง

คุณควรเห็นแผนที่ที่มีเครื่องหมายอยู่ตรงกลางซิดนีย์บนชายฝั่งตะวันออกของออสเตรเลีย คล้ายกับรูปภาพในหน้านี้

การแก้ปัญหา

• หากไม่เห็นแผนที่ ให้ตรวจสอบว่าคุณได้รับคีย์ API แล้วและเพิ่มลงในแอปแล้ว
• หากคุณใช้ตัวระบุ App Bundle ของ iOS เพื่อจำกัดคีย์ API ให้แก้ไขคีย์เพื่อเพิ่มตัวระบุ App Bundle ของแอป com.google.examples.map-with-marker
• ตรวจสอบว่าคุณมีการเชื่อมต่อ Wi-Fi หรือ GPS ที่สัญญาณดี
• ใช้ Flutter DevTools เพื่อดูบันทึกและแก้ไขข้อบกพร่องของแอป
• ดูข้อมูลเพิ่มเติมเกี่ยวกับการเรียกใช้แอป 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 จะแสดงเนื้อหาของหน้าต่างข้อมูลเมื่อผู้ใช้แตะเครื่องหมาย คุณไม่จําเป็นต้องเพิ่มตัวรับฟังการคลิกสําหรับเครื่องหมายหากต้องการใช้ลักษณะการทํางานเริ่มต้น

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