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

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

Lấy mã nguồn

Sao chép hoặc tải kho lưu trữ mẫu Flutter xuống. Bạn có thể tìm thấy mã mẫu trong thư mục google_maps.

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

Hãy đảm bảo bạn đã hoàn tất các bước trong hướng dẫn Thiết lập dự án Flutter trước khi tiếp tục chủ đề này.

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

  1. Mở tệp main.dart trong IDE mà bạn ưu tiê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 một tiện ích GoogleMap làm nội dung. 

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

  • Tuỳ chọn markerId gắn nhãn điểm đánh dấu của bạn.
  • Tùy chọn position thiết lập 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, 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 đồ với một điểm đánh dấu nằm ở 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 để chắc chắn rằng bạn đã lấy khoá API và thêm khoá đó vào ứng dụng.
  • Nếu bạn đã dùng giá trị nhận dạng gói iOS để hạn chế khoá API, hãy chỉnh sửa khoá để 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õ đoạn 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 đồ ở giữa 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 tiện ích điểm đánh dấu để thêm tiện ích này 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 dành cho Flutter sẽ hiển thị nội dung của cửa sổ thông tin khi người dùng nhấn vào một điểm đánh dấu. Bạn không cần thêm trình nghe lượt nhấp cho điểm đánh dấu nếu muốn sử dụng hành vi mặc định.

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