บทนำ
บทแนะนำนี้จะแสดงวิธีเพิ่ม Google Maps ลงในแอป Flutter โดยแผนที่จะมีเครื่องหมายหรือที่เรียกว่าหมุดเพื่อระบุตำแหน่งที่เฉพาะเจาะจง
กำลังรับรหัส
โคลนหรือดาวน์โหลดตัวอย่าง Flutter
ที่เก็บ ตัวอย่าง
code ได้ใน
ไดเรกทอรี google_maps
กำลังตั้งค่าโปรเจ็กต์การพัฒนา
โปรดทำตามขั้นตอนที่ระบุไว้ในหัวข้อตั้งค่าโปรเจ็กต์ Flutter ให้เสร็จสมบูรณ์ ก่อนที่จะดำเนินการต่อในหัวข้อนี้
1. นําเข้าแพ็กเกจ Google Maps สำหรับ Flutter
- เปิดไฟล์
main.dart
ใน IDE ที่ต้องการ - ตรวจสอบว่าได้มีการเพิ่มข้อความนำเข้าต่อไปนี้ลงในไฟล์แล้ว
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 โดยใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
- จาก IDE ให้คลิกปุ่ม
Run
- จากบรรทัดคำสั่ง ให้เรียกใช้
flutter run
คุณควรจะเห็นแผนที่ที่มีเครื่องหมายศูนย์กลางอยู่ที่ซิดนีย์บนชายฝั่งตะวันออกของ ออสเตรเลีย คล้ายกับรูปภาพในหน้านี้
การแก้ปัญหา
- หากไม่เห็นแผนที่ ให้ตรวจสอบว่าคุณได้รับคีย์ API และเพิ่มลงในแอปแล้ว
- หากคุณใช้ตัวระบุกลุ่ม iOS เพื่อจำกัดคีย์ API ให้แก้ไขคีย์เพื่อเพิ่มตัวระบุกลุ่มสำหรับแอป:
com.google.examples.map-with-marker
- ตรวจสอบว่าคุณมีการเชื่อมต่อ Wi-Fi หรือ GPS ที่ดี
- ใช้ Flutter DevTools เพื่อดูบันทึกและแก้ไขข้อบกพร่องของแอป
- ดูข้อมูลเพิ่มเติมเกี่ยวกับการเรียกใช้แอป Flutter
4. การทำความเข้าใจโค้ด
โค้ดนี้จะอยู่ใน GitHub
- นำเข้าแพ็กเกจที่จำเป็นและเริ่มต้นแอป
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, ), // CameraPosition ), // GoogleMap ), // Scaffold ); // MaterialApp } }
- เพิ่มวิดเจ็ตเครื่องหมายเพื่อเพิ่มวิดเจ็ตลงในแอป
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 ...
- เพิ่มหน้าต่างข้อมูลลงในเครื่องหมาย
โดยค่าเริ่มต้น แพ็กเกจ Google Maps สำหรับ Flutter จะแสดงเนื้อหาของข้อมูล เมื่อผู้ใช้แตะเครื่องหมาย ไม่จำเป็นต้องเพิ่ม Listener การคลิก สำหรับเครื่องหมายหากคุณยินดีใช้การทำงานเริ่มต้นconst Marker( markerId: const MarkerId("Sydney"), position: LatLng(-33.86, 151.20), infoWindow: InfoWindow( title: "Sydney", snippet: "Capital of New South Wales", ), // InfoWindow ), //Marker ...
ยินดีด้วย คุณได้สร้างแอป Flutter ที่แสดงแผนที่ของ Google พร้อม เครื่องหมายเพื่อระบุตำแหน่งที่เจาะจงและให้ข้อมูลเพิ่มเติมใน หน้าต่างข้อมูล และคุณยังได้เรียนรู้วิธีใช้แพ็กเกจ Google Maps สำหรับ Flutter อีกด้วย