마커 선택시 아이콘 변경
const selectedMarkerIcon = NOverlayImage.fromAssetImage('assets/location_icon.png');
선택되었을 때, 표시되는 마커를 먼저 정의
이후 state에
@freezed
class NaverMapState with _$NaverMapState {
const factory NaverMapState({
NaverMapController? mapController,
@Default([]) List<NClusterableMarker> markers,
@Default('전체') String selectedCategory,
@Default({}) Map<String, NOverlayImage> markerIcons,
NOverlayImage? selectedMarkerIcon,
//네이버 맵 데이터와 카테고리
@Default([]) List<NaverMapDataContent> naverMapData,
@Default([]) List<NaverMapCategoryContent> naverMapCategory,
//로딩 상태
@Default(ScreenState.loading) ScreenState screenState,
// 현재 위치
@Default(LocationModel(latitude: 0, longitude: 0))
LocationModel currentLocation,
StreamSubscription? compassSubscription,
//바텀 시트
PanelController? panelController,
@Default(BottomSheetState.closed) BottomSheetState panelState,
}) = _NaverMapState;
}
선택되었을 떄, 보여지는 마커를 정의 하자 selectedMarkerIcon
이후 state에 저장
emit(state.copyWith(
markerIcons: iconCache, selectedMarkerIcon: selectedMarkerIcon));
다음으로 마커를 클릭 했을 때, 보여지게 하는 방법은 아래처럼 진행해보자
일단 터치를 감지하기 위해서는
)..setOnTapListener((_) {
updatePanelState(BottomSheetState.half);
state.mapController?.updateCamera(
NCameraUpdate.withParams(
target: NLatLng(data.locationX!, data.locationY!),
)..setAnimation(duration: const Duration(milliseconds: 420)),
);
});
}).toSet();
요기 리스너 라는 부분에 추가를 진행하면 될 것 같은데 오버레이가 나오기 전에
마커를 클리어를 먼저 하면 될까?
state.mapController?.clearOverlays();
이렇게 하면 사용자가 터치 했을 떄, 마커가 클리어가 되고 앗.. 리펙 하고 싶어졌다
중복되는 로직 발견 바로 하나로 합쳐버리자