[flutter] 플러터에서 지도에 사용자 정의 마커 추가하기

21 Dec 2023

flutter

플러터를 사용하여 지도 애플리케이션을 개발할 때, 사용자 정의 마커를 추가하는 것은 매우 중요합니다. 이 기능을 사용하면 지도 위에 특정 위치를 나타내는 마커를 자신만의 스타일로 표시할 수 있습니다.

사용자 정의 마커 추가하기

플러터에서 지도에 사용자 정의 마커를 추가하는 것은 간단합니다. 아래 예제는 Google 지도 API로 사용자 정의 마커를 추가하는 방법을 보여줍니다.

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

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

class MapsDemo 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),
              icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueViolet),
              infoWindow: InfoWindow(
                title: 'San Francisco',
                snippet: 'An Interesting city',
              ),
            ),
          },
        ),
      ),
    );
  }
}

위의 예제에서 markers 속성을 사용하여 사용자 정의 마커를 추가합니다. Marker 클래스의 생성자를 사용하여 마커의 위치, 아이콘, 정보 창 등을 설정할 수 있습니다. 이를 통해 지도에 원하는 스타일의 마커를 추가할 수 있습니다.

결론

플러터를 사용하여 지도에 사용자 정의 마커를 추가하는 것은 간단하며, 다양한 스타일의 마커를 표시할 수 있습니다. 위의 예제를 참고하여 프로젝트에 맞는 사용자 정의 마커를 추가해 보세요.

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