[TIL] 99클럽 코테 스터디 32일차 TIL : 구글 맵

📖 오늘의 학습

---

이번엔 구글 지도를 연동해 주변 정보를 가져오는 기능을 만들어봤다. 지도 API는 몇 번 써보긴 했는데, 사용자가 지도를 움직일 때 마다 근처의 장소 정보들을 패칭해 오는 것은 처음 해보는 터라 걱정이 좀 있었다. 그러나 패키지를 사용하니 별 거 아니게 되었다...

 

우선 전체 코드는 아래와 같다. notifier(컨트롤러)에 대부분의 로직이 담겨있어서 대략적인 기능만 알 수 있다. ▼

GoogleMap(
          initialCameraPosition: const CameraPosition(
            target: LatLng(37.56, 127.0001), // 초기 위치 (서울 중심 좌표)
            zoom: 16.0,
          ),
          minMaxZoomPreference: const MinMaxZoomPreference(12.0, 18.0),
          onMapCreated: (GoogleMapController controller) {
            notifier.mapController = controller;
          },
          onCameraMove: (CameraPosition position) {
            notifier.updateCurrentCenter(position.target);
          },
          onCameraIdle: () async => await notifier.fetchNearByPlace(),
          myLocationEnabled: false,
          myLocationButtonEnabled: false,
          gestureRecognizers: {
            Factory<OneSequenceGestureRecognizer>(
              () => EagerGestureRecognizer(),
            )
          },
          markers: notifier.nearByPlaceList
              .map((place) {
                if (place.latitude != null && place.longitude != null) {
                  return Marker(
                    markerId: MarkerId(place.id.toString()),
                    position:
                        LatLng(place.latitude!, place.longitude!), // 좌표 추가
                    icon: BitmapDescriptor.defaultMarker, // 기본 마커 아이콘
                    onTap: () {
                      _showPlaceBottomSheet(context: context, model: place);
                    },
                  );
                } else {
                  debugPrint('Invalid place data: $place');
                  return null;
                }
              })
              .whereType<Marker>()
              .toSet(),
        ),

 

위의 기능(지도를 움직일 때 마다 패칭해오기)을 구현하려면 `onCameraMove`, `onCameraIdle`, `markers` 이 3가지만 알면 된다.

 

`onCameraMove`, 말 그대로 카메라가 움직일 때 동작할 콜백을 작성하면 된다. 나는 화면 중앙값을 계산하는 코드를 작성하여 움직일 때 마다 중앙점을 갱신하는 코드를 넣었다.

 

 `onCameraIdle`, 카메라가 더 이상 움직이지 않을 때 동작할 콜백을 작성하면 된다. 손가락을 떼면 동작하는 부분이다. 여기서 주변 장소들을 패칭하는 메소드를 넣었는데, 이 메소드를 `onCameraMove`에 넣게 되면 매 렌더링 마다 패치 메소드가 동작하기에 부하가 엄청나진다. 그렇기에 사용자가 화면을 움직이는 것을 멈춘 시점에 해당 위치의 장소들을 패칭하게 했다.

 

 마지막으로 `markers`, 사실상 위의 두 개 만으로 원하는 기능은 다 만들긴 했으나, 화면에 보여주는 것 까지가 마지막이다. 읽어온 좌표들을 마커에 넣어 보여줬다. `BitmapDescriptor.defaultMarker`로 기본 마커를 넣을 수 도 있고, `BitmapDescriptor.asset`을 통해 이미지를 넣을 수 도 있다.

 

 이렇게 하면 구글 맵을 통한 데이터 패칭은 쉽게 구현이 가능해진다.

 

🤔 오늘의 회고

---

패키지로 거의 모든 게 해결되는 플러터 세상... 내가 구현하고자 하는 기능이 없어서 패키지를 만들어야하는 상황이 오면 약간 난감하다. 물론 지금까지는 다 만들긴 했으나 메소드 채널까지 사용해 네이티브 기능을 구현해야하면 약간 머리가 아플거 같다.

 

오늘의 코테 문제는 이미 풀었던 문제라 스킵했다.