Thêm Bản đồ bằng Điểm đánh dấu

Giới thiệu

Ví dụ về bản đồ có điểm đánh dấu

Hướng dẫn này chỉ cho bạn cách thêm bản đồ Google vào ứng dụng Flutter. Bản đồ bao gồm điểm đánh dấu, còn được gọi là ghim, để cho biết một vị trí cụ thể.

Lấy mã

Sao chép hoặc tải mẫu Flutter xuống kho lưu trữ. Mẫu mã có trong thư mục google_maps.

Thiết lập dự án phát triển

Hãy nhớ hoàn tất các bước được nêu trong bài viết Thiết lập dự án Flutter trước khi tiếp tục với chủ đề này.

1. Nhập gói Google Maps cho Flutter

  1. Mở tệp main.dart trong IDE mà bạn muốn.
  2. Xác minh rằng câu lệnh nhập sau đã được thêm vào tệp:
import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Thêm Google Maps vào ứng dụng Flutter

Trong tiện ích Scaffold, hãy thêm tiện ích GoogleMap dưới dạng phần thân. 

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

  • Tuỳ chọn markerId sẽ gắn nhãn điểm đánh dấu của bạn.
  • Tùy chọn position đặt vị trí điểm đánh dấu xuất hiện trên bản đồ của bạn.

3. Xây dựng và chạy ứng dụng

Khởi động ứng dụng Flutter bằng một trong các tuỳ chọn sau:

  1. Trên IDE (môi trường phát triển tích hợp), hãy nhấp vào nút Run
  2. Trên dòng lệnh, hãy chạy flutter run.

Bạn sẽ thấy một bản đồ có một điểm đánh dấu ở giữa Sydney trên bờ biển phía đông của Úc, tương tự như hình ảnh trên trang này.

Khắc phục sự cố

  • Nếu không thấy bản đồ, hãy kiểm tra để đảm bảo bạn đã lấy được khoá API và thêm khoá đó vào ứng dụng.
  • Nếu bạn đã sử dụng giá trị nhận dạng gói iOS để hạn chế khoá API, hãy chỉnh sửa khoá này để thêm giá trị nhận dạng gói cho ứng dụng: com.google.examples.map-with-marker.
  • Đảm bảo rằng bạn có kết nối Wi-Fi hoặc GPS tốt.
  • Sử dụng Công cụ cho nhà phát triển Flutter để xem nhật ký và gỡ lỗi ứng dụng.
  • Bạn có thể tìm hiểu thêm về cách Chạy ứng dụng Flutter.

4. Hiểu rõ mã

Bạn có thể tìm thấy mã này trên GitHub.

  1. Nhập các gói cần thiết và khởi chạy ứng dụng. 
       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. Tạo bản đồ ở trung tâm là Sydney, Úc. 
    class _MyAppState extends State<MyApp> {
   
   late GoogleMapController mapController;
   
   final LatLng _center = const LatLng(-33.86, 151.20);
   
   void _onMapCreated(GoogleMapController controller) {
      mapController = controller;
   }
  3. Thêm các tiện ích cần thiết để hiển thị Bản đồ trong ứng dụng. 
    @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. Thêm các tiện ích đánh dấu để thêm tiện ích vào ứng dụng của bạn. 
       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. Thêm cửa sổ thông tin vào điểm đánh dấu. 
          const Marker(
            markerId: const MarkerId("Sydney"),
            position: LatLng(-33.86, 151.20),
            infoWindow: InfoWindow(
               title: "Sydney",
               snippet: "Capital of New South Wales",
            ), // InfoWindow
      ), //Marker
      ...
    Theo mặc định, gói Google Maps cho Flutter hiển thị nội dung của thông tin khi người dùng nhấn vào một điểm đánh dấu. Không cần thêm trình nghe lượt nhấp cho điểm đánh dấu nếu bạn muốn sử dụng chế độ mặc định.

Xin chúc mừng! Bạn đã xây dựng một ứng dụng Flutter hiển thị bản đồ Google với điểm đánh dấu để chỉ báo một vị trí cụ thể và cung cấp thông tin bổ sung trong một cửa sổ thông tin. Bạn cũng đã tìm hiểu cách sử dụng gói Google Maps cho Flutter.