[🌪 Error Handling] 반경 내의 마커만 보여주기 + 보여준 마커들의 데이터만 리스트에 보여주기 / 2021-09-27

> 해결된 에러라면 라벨에 'Complete' 를 달아주세요.
> 미해결된 에러라면 라벨을 'In progress' 로 변경해주세요.

### 어떤 에러인가요?
- 전체 데이터에서 반경안의 데이터만 보여줘야하는데, 마커는 그렇게 가능했지만, 간단히 가게의 정보를 보여주는 리스트에서는 전체데이터가 나온다.

### 에러 메시지

```js
반경을 만들고, 반경을 지도에 띄어주는 코드
const circle = new kakao.maps.Circle({
center: new kakao.maps.LatLng(result[0].y, result[0].x), // 원의 중심좌표 입니다
radius: 2500, // 미터 단위의 원의 반지름입니다
strokeWeight: 5, // 선의 두께입니다
strokeColor: "#75B8FA", // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: "dashed", // 선의 스타일 입니다
fillColor: "#CFE7FF", // 채우기 색깔입니다
fillOpacity: 0.5, // 채우기 불투명도 입니다
});

// // 지도에 원을 표시합니다
circle.setMap(map);
```

```js
// 불러온 데이터에 있는 주소들을 좌표로 만들어 마커에 찍어준다.

const radius = 2500; //반경 범위 변수

for (let i = 0; i < initialStore.length; i++) {
// 주소로 좌표를 검색합니다
geocoder.addressSearch(
initialStore[i].address,
function (result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
const coords = new kakao.maps.LatLng(
result[0].y,
result[0].x
);
// 결과값으로 받은 위치를 마커로 표시합니다
marker = new kakao.maps.Marker({
map: map,
position: coords,
});

kakao.maps.event.addListener(marker, "click", () => {
geocoder.coord2Address(
coords.getLng(),
coords.getLat(),
callback
);
});

센터랑 마커의 위치를 찾아 반경 거리를 구하고, 비교하여 보여주어야한다.
지도에는 뜨지만, 리스트에는 적용이 안되었다.

const c1 = map.getCenter();
const c2 = marker.getPosition();
const poly = new kakao.maps.Polyline({
map: map,
path: [c1, c2],
strokeOpacity: 0,
});

const dist = poly.getLength();
if (dist < radius) {
marker.setMap(map);
} else {
marker.setMap(null);
}
}

}

);
}
```

### 에러 핸들링 방법

- 맨위에 markers라는 빈배열을 만들고, 거리를 계산하여 보여줄지 말지 정하는 코드 쪽에 storelist를 만들어주는 함수를 props로 가져와 적용시켰다.

```js
const markers=[]

...생략...

const c1 = map.getCenter();
const c2 = marker.getPosition();
const poly = new kakao.maps.Polyline({
map: map,
path: [c1, c2],
strokeOpacity: 0,
});

const dist = poly.getLength();
if (dist < radius) {
+여기 markers.push(initialStore[i]);
marker.setMap(map);
} else {
marker.setMap(null);
}
}
+여기 clickHashtagHandler(markers);

}
```

### 에러 핸들링을 위해 참고한 레퍼런스 링크

[지도 센터 반경범위 내 마커찍기가 안됩니다](https://devtalk.kakao.com/t/topic/106496)
레퍼런스에서는 이렇게 되어있지만,
```js
var poly = new Polyline({
// map: map, 을 하지 않아도 거리는 구할 수 있다.
path: [c1, c2]
});
```
이렇게 수정해야한다.
```js
var poly = new kakao.maps.Polyline({
path: [c1, c2]
});
```