17. 네이버지도 - 마커클릭시 이미지변경 , refresh클릭시 아이콘 비활성화

소요시간

2025년 2월 15일 - 1시간

 

 

 

느낀점

 

오늘은 일이 있어서 나갔다 왔는데 

머리 속에 자꾸 네이버 지도가 아른거려서 1시간이라도 하고 자야겠다고 느껴서

만졌는데

 

기존에 만들지 못했던 기능들을 1시간만에 만들 수있어서 기분이 좋았고 

계속 코드만 보고있는다고 코드가 잘 써지는건 아니라고 생각이들었다.

 

 

 

마커 클릭 시 이미지 추가

 

 

 

기존에 icon에 maker_off.png 아이콘을 썼는데

 

클릭했을 때 이미지를 누른 거 같은 느낌을 내야 되니까 

누른 마커는 maker_on.png로 뜨게 만들었다. 

   
   // 위젯의 상태로 선택된 마커 title을 관리 (예: StatefulWidget)
  String? _selectedMarkerTitle;
   
   
   // 선택된 마커면 on 이미지, 아니면 off 이미지 사용
    final String iconPath = (title == _selectedMarkerTitle)
        ? 'assets/image/maker_on.png'
        : 'assets/image/marker_off.png';

    final marker = NMarker(
      id: title,
      position: NLatLng(latitude, longitude),
      caption: NOverlayCaption(text: address),
      icon: NOverlayImage.fromAssetImage(iconPath),
      size: const Size(40, 40),
    );

 

 

 

 

refresh 제스처 추가

 

 

 

기존에 항상 현지도에서 검색하기 버튼이 떴는데 

이러면 곤란하고 사용자가 검색을 했을 때는 버튼이 안 뜨게 만들어야 된다.

이유는 이미 그 지도에 해당하는 검색 결과를 알려주었기 때문에 다시 또 현 지도에서 사용자가 또다시

검색할 수 있는 경우의 수를 보여 줄 필요가 없다.

 

 

 

bool _showRefreshButton = false;

버튼을 비활성화로 만들어 놓고 

 

 

사용자가 카메라를 이동했을때 버튼이 활성화게되게 만들어준다 .

// 카메라 이동 이벤트 (사용자 제스처 시 버튼 표시)
onCameraChange: (NCameraUpdateReason reason, bool animated) {
  if (reason == NCameraUpdateReason.gesture) {
    if (!_showRefreshButton) {
      setState(() {
        _showRefreshButton = true;
      });
    }
  }
},

 

 

그리고 

 

 

현지도에서 검색하기 ui에 if문을 눌러서 ture일때 ui뜨고 false일때 ui가 안뜨게 하였고 

 

버튼을 눌렀을때는 false가 뜨게 만들어야 되니까

버튼을 눌렀을때 false가 되게만들었다. 

                            if (_showRefreshButton)
                              Positioned(
                                top: 20,
                                left: 0,
                                right: 0,
                                child: Center(
                                  child: GestureDetector(
                                    onTap: () async {
                                      // 🔹 버튼을 누르면 false로 설정하여 숨김
                                      setState(() {
                                        _showRefreshButton = false;
                                      });

                                      if (mounted) {
                                        setState(() {}); // UI 갱신 강제 적용
                                      }
                                      await Future.delayed(Duration(milliseconds: 100));
                                      // 현재 지도 화면 기준으로 마커 업데이트
                                      _updateMarkers(dataProvider, context);
                                    },

                                  ),
                                ),
                              ),

 

 

여기서 issue가 

이부분을 안넣었을때 실시간으로 업데이트가 안되어서 

UI부분에 약간의 텀( 0.01초 정도 )을 넣어서 사용자가 움직였을때 UI가 반영되게 하였다.

                                      if (mounted) {
                                        setState(() {}); // UI 갱신 강제 적용
                                      }
                                      await Future.delayed(Duration(milliseconds: 100));
                                      // 현재 지도 화면 기준으로 마커 업데이트

 

 

 

 

참고사이트

 

flutter_naver_map 플러그인

( 파일 사용법이 기존의 방법가 약간의 차이가 있어서 직접 파일을 열어서 어떻게 작동하는지 참고)