[flutter] 플러터에서 지도 위에 원형 마커 표시하기

21 Dec 2023

flutter

지도 어플리케이션을 개발할 때, 사용자의 위치나 특정 장소를 나타내기 위해 원형 마커를 표시하고 싶을 수 있습니다. 이번 글에서는 플러터(Flutter)에서 지도 위에 원형 마커를 표시하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치

원형 마커를 사용하기 위해서는 먼저 google_maps_flutter 패키지를 설치해야 합니다. pubspec.yaml 파일에서 아래와 같이 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6
  location: ^4.3.0

이후 패키지를 설치하기 위해 터미널에서 flutter pub get 명령어를 실행해주세요.

지도 위에 원형 마커 추가하기

google_maps_flutter 패키지를 사용하여 지도 위에 원형 마커를 추가하는 방법은 다음과 같습니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 12,
          ),
          markers: {
            Marker(
              markerId: MarkerId('marker_1'),
              position: LatLng(37.7749, -122.4194),
              infoWindow: InfoWindow(
                title: 'San Francisco',
                snippet: 'Welcome to San Francisco',
              ),
              icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueAzure),
            ),
          },
        ),
      ),
    );
  }
}

위 코드에서는 GoogleMap 위젯을 사용하여 지도를 표시하고, markers 속성을 통해 마커를 추가하고 있습니다. Marker 생성자를 이용하여 마커의 위치와 정보를 설정할 수 있습니다. icon 속성을 사용하여 마커의 아이콘을 변경할 수 있습니다.

마무리

지도 위에 원형 마커를 표시하는 방법에 대해 간단히 알아보았습니다. 이제 여러분들은 플러터를 이용하여 지도 어플리케이션을 개발할 때 원형 마커를 손쉽게 추가할 수 있을 것입니다. 지도 어플리케이션 개발 시 유용하게 활용해보시기 바랍니다!

더 많은 정보는 Google Maps Flutter 패키지 문서를 참고하시길 바랍니다.