[flutter] 플러터에서 현재 위치를 표시하는 마커 추가하기

21 Dec 2023

flutter

플러터 앱에서 현재 사용자의 위치를 지도에 표시하는 것은 매우 중요합니다. 지도 위에 마커를 추가하여 사용자의 위치를 시각적으로 표현할 수 있습니다.

현재 위치 가져오기

먼저, location 패키지를 사용하여 사용자의 현재 위치를 가져옵니다. 이를 위해 location 패키지를 pubspec.yaml 파일에 추가하고, 위치 권한을 요청하는 코드가 포함된 함수를 작성해야 합니다. 사용자의 현재 위치 정보를 받아오면, 이를 이용하여 지도에 마커를 추가할 수 있습니다.

dependencies:
  location: ^4.1.1

import 'package:location/location.dart';

void getUserLocation() async {
  LocationData currentLocation;
  var location = Location();

  try {
    currentLocation = await location.getLocation();
  } catch (e) {
    currentLocation = null;
  }
}

이 코드는 사용자의 현재 위치를 가져오는 함수를 보여줍니다. 이 함수를 호출하여 사용자의 현재 위치를 가져올 수 있습니다.

지도에 마커 추가하기

사용자의 현재 위치를 가져온 후, 이를 이용하여 지도에 마커를 추가해야 합니다. 마커를 추가하려면 google_maps_flutter 패키지를 사용하여 Google 지도를 표시하고 마커를 추가해야 합니다.

import 'package:google_maps_flutter/google_maps_flutter.dart';

GoogleMapController mapController;

void _onMapCreated(GoogleMapController controller) {
  mapController = controller;
}

void addMarker(double lat, double lng) {
  var marker = Marker(
    position: LatLng(lat, lng),
    icon: BitmapDescriptor.defaultMarker,
  );

  mapController.addMarker(marker);
}

이 코드는 마커를 추가하는 함수를 보여줍니다. 이 함수를 호출하여 사용자의 현재 위치에 마커를 추가할 수 있습니다.

마무리

이제, 사용자의 현재 위치를 가져와 지도에 마커를 추가하는 방법을 알게 되었습니다. 이를 응용하여 사용자의 위치 정보를 효과적으로 표시할 수 있습니다.

위 코드 예시는 간단한 사용 방법을 보여주며, 실제 앱에서는 에러 처리와 사용자 경험을 고려하여 추가 작업이 필요할 수 있습니다.

현재 위치 가져오기

지도에 마커 추가하기

마무리

참고 자료