[Flutter] 구글 맵 경로 추적 기능 구현

Flutter와 Google Maps, Location 패키지를 활용하여 간단하게 경로 추적 기능을 구현하는 방법을 정리하겠습니다.

라이브러리 추가

google_maps_flutter
https://pub.dev/packages/google_maps_flutter
Location
https://pub.dev/packages/location

• google_maps_flutter : Google 맵 라이브러리 입니다.
• Location : 현재 위치를 가져오고 실시간 위치 변경을 추적하는 데 사용됩니다.

android, ios 설정은 pub.dev의 readme에 있으니 따라 설정하시면 됩니다.

앱 구조

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  GoogleMapController? _controller;
  Location _location = Location();
  bool _tracking = false; // 경로 추적 상태
  List<LatLng> _route = []; // 경로를 저장할 리스트
  Set<Polyline> _polylines = {}; // 지도에 표시할 Polyline

  @override
  void initState() {
    super.initState();
  }

  // 경로 추적 시작
  void _startTracking() {
    _route.clear(); // 이전 경로 초기화
    _polylines.clear(); // 지도에서 경로 초기화
    setState(() {
      _tracking = true; // 추적 상태로 변경
    });

    // 위치 추적 시작
    _location.onLocationChanged.listen((LocationData currentLocation) {
      if (_tracking) {
        setState(() {
          print("latitude : "+currentLocation.latitude!.toString());
          print("longitude : "+currentLocation.longitude!.toString());
          LatLng position = LatLng(currentLocation.latitude!, currentLocation.longitude!);
          _route.add(position); // 새로운 좌표 추가
          _polylines.add(Polyline(
            polylineId: PolylineId("route"),
            points: _route,
            color: Colors.blue,
            width: 5,
          ));
          _controller?.animateCamera(CameraUpdate.newLatLng(position)); // 카메라 위치 이동
        });
      }
    });
  }

  // 경로 추적 중지
  void _stopTracking() {
    setState(() {
      _tracking = false; // 추적 중지 상태로 변경
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("맵 루트 표시 테스트"),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            flex: 2,
            child: GoogleMap(
              initialCameraPosition: CameraPosition(
                target: LatLng(35.1691, 129.0874), // 초기 카메라 위치
                zoom: 17,
              ),
              myLocationEnabled: true, // 현재 위치 표시
              onMapCreated: (GoogleMapController controller) {
                _controller = controller;
              },
              polylines: _polylines, // 경로를 지도에 표시
            ),
            // child: Container(),
          ),
          Expanded(
            child: Center(
              child: ElevatedButton(
                onPressed: _tracking ? _stopTracking : _startTracking,
                child: Text(_tracking ? '중지' : '시작'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Google Map 위젯

• initialCameraPosition
  - 지도에서 처음 표시되는 카메라 위치와 줌 레벨을 설정합니다.
  - 타입 : CameraPosition
  • 필수 여부 : 필수
• onMapCreated
  - 지도가 처음 생성된 후 호출되는 콜백 함수로, 여기서 지도 컨트롤러를 초기화할 수 있습니다.
  • 타입 : void Function(GoogleMapController controller)
• myLocationEnabled
  - 사용자의 현재 위치를 지도에 표시할지 여부를 설정합니다.
  • 타입 : bool
  • 기본값 : false
• myLocationButtonEnabled
  - 사용자가 자신의 현재 위치로 카메라를 이동시킬 수 있는 위치 버튼을 활성화할지 여부를 설정합니다.
  • 타입 : bool
  • 기본값 : true
• markers
  - 지도에 표시할 마커(위치 표시 아이콘)를 설정합니다. Set을 사용해 여러 마커를 추가할 수 있습니다.
  • 타입 : Set<Marker>
• polylines
  - 지도에 경로를 표시하는 Polyline 객체들을 설정합니다
  • 타입 : Set<Polyline>
• onCameraMove
  - 사용자가 지도를 이동하거나 줌을 변경할 때 호출되는 콜백 함수입니다.
  • 타입 : void Function(CameraPosition position)
• onCameraIdle
  - 사용자가 카메라를 움직인 후 멈췄을 때 호출되는 콜백 함수입니다.
  • 타입 : void Function()
• zoomControlsEnabled
  - 사용자가 화면에서 줌 컨트롤(확대/축소 버튼)을 사용할 수 있도록 활성화할지 여부를 설정합니다.
  • 타입 : bool
  • 기본값 : true
• mapType
  - 지도의 타입을 설정합니다. (기본, 위성, 하이브리드 등)
  • 타입 : MapType
  • 기본값 : MapType.normal
  • 기능 값
    • MapType.normal : 기본 지도
      • MapType.satellite : 위성 이미지 지도
      • MapType.terrain : 지형 지도
      • MapType.hybrid : 위성과 도로 혼합 지도
• trafiicEnabled
  - 지도에서 실시간 교통 상황을 표시할지 여부를 설정합니다.
  • 타입 : bool
  • 기본값 : false
• onTap
  - 사용자가 지도를 탭할 때 호출되는 콜백 함수입니다. 지도의 특정 위치를 선택하는 기능에 사용할 수 있습니다.
  • 타입 : void Function(LatLng position)
• onLongPress
  - 사용자가 지도를 길게 누를 때 호출되는 콜백 함수입니다.
  • 타입 : void Function(LatLng position)

경로 추적 구현

• Location 패키지 사용 : onLocationChanged 메서드를 사용하여 실시간으로 사용자의 위치 변화를 추적합니다.
• 경로를 polyline으로 표시 : 추적된 경로를 polyline으로 Google Maps에 표시합니다. 사용자가 이동할 때마다 새로운 좌표를 추가하고, Polyline으로 지도에 그려줍니다.