[flutter] 플러터에서 지도 위에 다각형(polygon) 그리기

21 Dec 2023

flutter

1. 구글 맵 플러터 패키지 설치

먼저, 다각형을 그리기 위해서 google_maps_flutter 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

그리고 터미널에서 아래 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. 지도에 다각형 그리기

지도에 다각형을 그리려면, 다음과 같은 단계를 따릅니다.

2.1. 다각형을 나타내는 좌표 리스트 정의

먼저, 다각형을 그리기 위해 해당 다각형의 꼭지점 좌표 리스트를 정의해야 합니다. 예를 들어, 다음과 같이 다각형을 나타내는 LatLng 리스트를 생성합니다.

List<LatLng> polygonLatLngs = [
  LatLng(37.42796133580664, -122.085749655962),
  LatLng(37.42199935426273, -122.08460682630574),
  LatLng(37.42199935426273, -122.0797680617571),
  LatLng(37.4251444140665, -122.0797680617571),
];

2.2. 지도 위에 다각형 그리기

그리고 나서, GoogleMap 위에 Polygon을 그립니다. 아래의 예시 코드는 주어진 좌표 리스트를 이용하여 지도 위에 다각형을 그리는 방법을 보여줍니다.

GoogleMap(
  initialCameraPosition: _kGooglePlex,
  polygons: {
    Polygon(
      polygonId: PolygonId('polygon_1'),
      points: polygonLatLngs,
      fillColor: Colors.green.withOpacity(0.5),
      strokeWidth: 3,
      strokeColor: Colors.green,
    ),
  },
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
  },
),

위 코드에서 polygonId를 설정하는 것을 잊지 마세요. 이를 통해 다각형을 식별할 수 있습니다.

위의 단계를 따르면, 플러터(Flutter) 앱에서 지도 위에 다각형을 그릴 수 있습니다. 이를 통해 더욱 시각적인 지도 앱을 개발할 수 있게 될 것입니다.