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

21 Dec 2023

flutter

플러터를 사용하여 지도 애플리케이션을 개발 중이거나 개발하려는 경우, 지도에 사용자 정의 도형을 추가하는 방법을 알고 계신가요? 이 포스트에서는 플러터에서 지도에 사용자 정의 도형을 추가하는 방법을 살펴보겠습니다.

구글 맵 패키지 사용

플러터에서 지도를 다루기 위해서는 google_maps_flutter 패키지를 사용해야 합니다. 이 패키지를 사용하여 지도 위에 사용자 정의 도형을 그릴 수 있습니다.

import 'package:google_maps_flutter/google_maps_flutter.dart';

마커 추가

가장 일반적인 사용자 정의 도형은 마커입니다. 다음은 마커를 추가하는 예제 코드입니다.

Marker customMarker = Marker(
  markerId: MarkerId('customMarker'),
  position: LatLng(37.77483, -122.41942),
  icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen),
  onTap: () {
    // 마커를 탭했을 때의 동작
  },
);

Set<Marker> markers = Set.from([customMarker]);

GoogleMap(
  markers: markers,
  // 지도의 다른 설정들
);

사용자 정의 이미지 사용

커스텀 마커 아이콘을 사용하여 지도에 더 다양한 도형을 추가할 수 있습니다. 이미지 파일을 사용하여 아이콘을 정의하고, 해당 이미지를 마커에 적용할 수 있습니다.

BitmapDescriptor customIcon = await BitmapDescriptor.fromAssetImage(
  ImageConfiguration(devicePixelRatio: 2.5),
  'assets/custom_icon.png',
);

그리고 이 커스텀 이미지를 사용하여 마커를 추가할 수 있습니다.

Marker customMarker = Marker(
  markerId: MarkerId('customMarker'),
  position: LatLng(37.77483, -122.41942),
  icon: customIcon,
  onTap: () {
    // 마커를 탭했을 때의 동작
  },
);

다각형 및 선 추가

마커 이외에도 다각형이나 선을 추가하여 원하는 모양을 표현할 수 있습니다. 예를 들어, 다각형을 추가하는 방법은 다음과 같습니다.

Polygon customPolygon = Polygon(
  polygonId: PolygonId('customPolygon'),
  points: [
    LatLng(37.78493, -122.42942),
    LatLng(37.78483, -122.41942),
    LatLng(37.77483, -122.41942),
  ],
  strokeWidth: 2,
  strokeColor: Colors.blue,
  fillColor: Colors.lightBlue.withOpacity(0.5),
  onTap: () {
    // 다각형을 탭했을 때의 동작
  },
);

Set<Polygon> polygons = Set.from([customPolygon]);

GoogleMap(
  polygons: polygons,
  // 지도의 다른 설정들
);

결론

이제 여러분은 플러터를 사용하여 지도에 사용자 정의 도형을 추가하는 방법을 배웠습니다. 마커, 이미지 아이콘, 다각형, 선 등 다양한 형태의 도형을 추가하여 원하는 모양을 표현할 수 있습니다. 이제 이러한 방법을 사용하여 지도에 다양한 사용자 정의 도형을 추가해 보세요!