[flutter] 플러터에서 지도에 사용자 정의 오버레이 추가하기

21 Dec 2023

flutter

flutter 앱에서 지도를 사용하는 경우, 사용자 정의 오버레이를 추가하여 지도 상에 특정 위치나 지역을 부각시킬 수 있습니다. 이 기능은 지도 위에 원, 선, 이미지, 텍스트 등을 표시하는 데 사용됩니다. 이번 게시물에서는 플러터 앱에서 google_maps_flutter 패키지를 사용하여 지도에 사용자 정의 오버레이를 추가하는 방법을 다룰 것입니다.

1. `google_maps_flutter` 패키지 설치

먼저, google_maps_flutter 패키지를 앱에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6

그리고 터미널에서 다음 명령어를 실행하여 패키지를 가져옵니다:

flutter pub get

2. 지도 위에 사용자 정의 오버레이 추가하기

다음으로, 지도 위에 사용자 정의 오버레이를 추가할 수 있습니다. 예를 들어, 원을 추가해보겠습니다.

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

class CustomMapOverlay extends StatefulWidget {
  @override
  State<CustomMapOverlay> createState() => _CustomMapOverlayState();
}

class _CustomMapOverlayState extends State<CustomMapOverlay> {
  late GoogleMapController mapController;

  static const LatLng _center = const LatLng(37.7749, -122.4194);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
        markers: _createMarkers(),
      ),
    );
  }

  Set<Marker> _createMarkers() {
    return <Marker>{
      Marker(
        markerId: MarkerId("marker_1"),
        position: _center,
        icon: BitmapDescriptor.defaultMarker,
      ),
    };
  }
}

void main() {
  runApp(const MaterialApp(
    home: CustomMapOverlay(),
  ));
}

위 코드는 플러터 앱에서 google_maps_flutter 패키지를 사용하여 지도 위에 원 모양의 오버레이를 추가하는 예시입니다.

결론

이제 앱의 지도에 원, 선, 이미지, 텍스트 등 다양한 사용자 정의 오버레이를 추가하는 방법에 대해 알아보았습니다. 이를 응용하여 지도를 보다 풍부하게 표현할 수 있으며, 사용자에게 더 나은 지도 활용 경험을 제공할 수 있습니다.

1. google_maps_flutter 패키지 설치

2. 지도 위에 사용자 정의 오버레이 추가하기

결론

1. `google_maps_flutter` 패키지 설치