프로젝트

거리 계산한 값 보여주기

• dist가 거리를 계산한 값
• dist를 distArr에 넣어준다.

// Map.tsx

 markers?.forEach(function (marker) {
      // 마커의 위치와 원의 중심을 경로로 하는 폴리라인 설정
      let markerPosition = marker.getPosition();
      let path = [markerPosition, center];
      line.setPath(path);

      // 마커와 원의 중심 사이의 거리
      let dist = line.getLength();

      // 이 거리가 원의 반지름보다 작거나 같다면
      if (dist <= radius) {
        // 거리를 배열에 넣어줌, 마커의 경도/위도를 배열에 넣어줌
        distArr.push(dist);
        markerLocation.push(markerPosition);
      }
    });

• props로 넘겨줘서 MainItem 컴포넌트에서 받는다.
• 받아온 거리를 기존 데이터에 넣어준다.
• 카드에서 받아온 거리를 사용해준다.
  

가까운 순으로 정렬

• 거리를 따로 받아와서 MainItem에서 넣어주니 sort 하기가 어려웠다.
• 따로 거리 데이터를 넘겨주지 않고 filterData에 dist를 추가해서 넘겨준 뒤 sort 해주었다.

// Map.tsx

  // 위의 아이템에 마커와 내 위치의 거리를 계산한 값을 넣어줌
    for (let i = 0; i < arrFilter.length; i++) {
      arrFilter[i].dist = distArr[i];
    }
  }, []);

// Main.tsx

 // 이름이 똑같은 주유소가 있어서 중복된 것을 제거한 뒤, 가까운 거리의 주유소로 정렬해줌
  let newData = Array.from(new Set(data)).sort(
    (a: Item, b: Item) => Number(a.dist) - Number(b.dist),
  );