오늘은 가장 먼저 매장을 클릭했을 때, 매장과 내 위치와 얼마나 거리가 먼가 계산을 해 보여주는 형식으로 진행을 할 예정이다.

    return NClusterableMarker(
      id: data.marketId.toString(),
      position: NLatLng(data.locationX!, data.locationY!),
      icon: state.markerIcons[data.majorCategory]!,
      size: Size(27.sw, 27.sh),
    )..setOnTapListener((_) {
        print('마커 클릭됨: ${data.marketId.toString()}');

        updateSelectedMarkerIcon(
          NLatLng(data.locationX!, data.locationY!),
          data,
        );
      });

저 프린트 문 위치에 마커를 클릭했을 떄, 발생하는 이벤트를 작성할 것이다.

그러면 가장 먼저 흐름도를 정의해보자

분기

1. 사용자가 위치 권한을 허용했을 때,

   • 사용자의 현재 위치와 클릭한 마커의 위치를 받아와 직선 거리로 계산한다

     • 함수 정의 시작

       서비스 파일에 먼저

       
         //-------------------------------------------
         // 사용자의 위치와 클릭한 마커와의 위치 거리 계산      //
         //-------------------------------------------
       
         // 사용자의 위치와 클릭한 마커와의 위치 거리 계산
         double calculateDistance(NLatLng userLocation, NLatLng markerLocation) {
           return userLocation.distanceTo(markerLocation);
         }
       

       작성 후, 큐빅 파일에서

       
           // 일반 마커는 클러스터링 가능한 마커 사용
           return NClusterableMarker(
             id: data.marketId.toString(),
             position: NLatLng(data.locationX!, data.locationY!),
             icon: state.markerIcons[data.majorCategory]!,
             size: Size(27.sw, 27.sh),
           )..setOnTapListener((_) {
               print('마커 클릭됨: ${data.marketId.toString()}');
               final distance = _naverMapService.calculateDistance(
                 NLatLng(
                     state.currentLocation.latitude, state.currentLocation.longitude),
                 NLatLng(data.locationX!, data.locationY!),
               );
               print('거리: $distance');
               updateSelectedMarkerIcon(
                 NLatLng(data.locationX!, data.locationY!),
                 data,
               );
             });
       

       한번 봐보자

       flutter: 거리: 9017570.071916055

       ….????????

       좋다 이제 이거를 1km가 넘으면 ?.?km 1키로미터가 아니라면 m로 진행

       이거 역시 내가 유틸에 만들어둔 파일이 있즤

       String formatDistance(double distanceInMeters) {
         if (distanceInMeters < 1000) {
           // 1km 미만일 경우 미터로 표시
           return '${distanceInMeters.round()}m';
         } else {
           // 1km 이상일 경우 킬로미터로 표시
           final kilometers = distanceInMeters / 1000;
           return '${kilometers.toStringAsFixed(1)}km';
         }
       }
       

       파일을 정의하고 사용해보자

           @Default('') String distance,
       

       이 후, state에 저장할 변수 정의

           // 일반 마커는 클러스터링 가능한 마커 사용
           return NClusterableMarker(
             id: data.marketId.toString(),
             position: NLatLng(data.locationX!, data.locationY!),
             icon: state.markerIcons[data.majorCategory]!,
             size: Size(27.sw, 27.sh),
           )..setOnTapListener((_) {
               print('마커 클릭됨: ${data.marketId.toString()}');
               final distance = _naverMapService.calculateDistance(
                 NLatLng(
                     state.currentLocation.latitude, state.currentLocation.longitude),
                 NLatLng(data.locationX!, data.locationY!),
               );
               final formattedDistance = formatDistance(distance);
               emit(state.copyWith(distance: formattedDistance));
               print('거리: ${state.distance}');
               updateSelectedMarkerIcon(
                 NLatLng(data.locationX!, data.locationY!),
                 data,
               );
             });
       

       다시 프린트 문을 찍어보면

       flutter: 거리: 9017.6km

       오 잘뜬다..? 일단 지금 이게 시뮬레이터 기준이라 미국으로 찍혀 있어 너무 멀게 나오는거지만 일단 잘 나온다. 추후 핸드폰으로 테스트를 진행해보자

       이제 실제 거리 표시

             Text(
                         '현재 위치로부터 $distance',
                         style: const TextStyle(
                           color: Color(0xff6fbf8a),
                           fontSize: 12,
                           fontFamily: 'Pretendard',
                         ),
                       ),
       

2. 사용자가 위치 권한을 허용하지 않았을 때,

   여기서 문제가 발생했다.

   flutter: 위도: 0.0 flutter: 경도: 0.0 flutter: 마커 위도: 36.9875058495892 flutter: 마커 경도: 127.941136968332 flutter: 거리: 13293.2km

사용자의 위치가 없는데 거리가 13293이 찍혀버린다..

그러면 서비스 파일에서

  //-------------------------------------------
  // 사용자의 위치와 클릭한 마커와의 위치 거리 계산      //
  //-------------------------------------------

  // 사용자의 위치와 클릭한 마커와의 위치 거리 계산
  double calculateDistance(NLatLng userLocation, NLatLng markerLocation) {
    if (userLocation.latitude == 0 || userLocation.longitude == 0) {
      return 0.0;
    } else {
      return userLocation.distanceTo(markerLocation);
    }
  }

위와 같이 조건문을 추가해서 사용자의 거리가 없으면 0으로 보여지게 하자

이제 0으로 받는 것을 확인 했으니

삼항 연산자부터 해결을 진행해보자