react/caka地図API-位置による投稿の読み込み

18220 ワード
KakoMap FinalProject テキストリンク
地図を移動するたびに、地図のアドレスに投稿とマークのリストだけを表示させます.
地図を縮小するときは全国のすべての投稿の要求を出すことができないので、地図のレベルによって投稿の有無を決めます.
地図レベルが6レベルを超える場合は、リクエストは送信されません.
6を下回ると、リクエストを出して地図上のリストを手に入れます.
そのリストでタグを生成するコードを書きました
地図のカタログを手に入れるために、求人記事を書くときに住所を緯度と経度に変更し、データベースに入れました.
地図の南西座標と東北座標を求めて、その中の文字だけを受信するコードを書きました
地図サイズの変更またはドラッグ完了後にaxiosリクエストを発行
const [state, setState] = useState({
  // 지도의 초기 위치
  center: { lat: 37.49676871972202, lng: 127.02474726969814 },
  // 지도 위치 변경시 panto를 이용할지(부드럽게 이동)
  isPanto: true,
});
  // 마커 표시 데이터
const MarkerPost = useSelector((state)=> state.postsReducer.posts)

// 지도가 생성될 때, state가 바뀔때 지도의 정보 가져옴
useEffect(()=>{
  handleMapInfo()
}, [map, state])

// 지도의 레벨에 맞춰 목록 출력
useEffect(()=>{
  if(info && info.level <= 5){
    dispatch(showPostList(info))
  }else if(info && info.level >= 6){
    dispatch(showPostList())
  }    
}, [info])

// 지도의 정보 가져옴
const handleMapInfo = () => {
  {map && (setInfo({
    level: map.getLevel(),
    swLatLng: {
      lat: map.getBounds().getSouthWest().getLat(),
      lng: map.getBounds().getSouthWest().getLng(),
    },
    neLatLng: {
      lat: map.getBounds().getNorthEast().getLat(),
      lng: map.getBounds().getNorthEast().getLng(),
    },
  }))
  }

<Map // 지도를 표시할 Container
	center={state.center}
	isPanto={state.isPanto}
	style={{
       // 지도의 크기
       width: "100%",
       height: "70vh",
      }}
      level={4} // 지도의 확대 레벨
	onCreate={(map) => setMap(map)}
	onZoomChanged={(map) => setLevel(map.getLevel())}
	onIdle={handleMapInfo} // 중심 좌표나 확대 수준이 변경됐을 때
>

{MarkerPost && 
  MarkerPost.map((el, index) => (
    <MapMarker
      key={index}
   	  position={{ lat: el.lat, lng: el.lng }} // 마커 표시 위치
      image={{
        src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png", // 마커이미지 주소
        size: {
          widht: 24,
          height: 35
         }, // 마커이미지 크기
      }}
  />))
 }
最も時間がかかるのは、地図レベルで投稿を要求する部分と、投稿を要求しない部分です.
reduceで関数をもう1つ作成することで、投稿のリセットを解決できます.
const showPostReset = () => {
  return {
    type : RESET_POST_LIST,
    payload : null,
  }
}

export const showPostList = (info) => {
  return (dispatch) => {
    if(!info){
      dispatch(showPostReset())
    }else{
      axios.get(`${process.env.REACT_APP_API_URL}/contents?start=${info.swLatLng.lat},${info.swLatLng.lng}&end=${info.neLatLng.lat},${info.neLatLng.lng}`)
      .then(post => dispatch(showPostSuccess(post)))
      .catch(err=> console.log(err))
    }
  }
}
HDU 2031進数変換(進数変換)
タイプチェックはしないでください.