現在地基準の当該駅を複数表示できるように修正

menu.js

@@ -55,9 +55,9 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
       }
     }, 10);
   }, []);
-  //位置情報
-  const { position, locationStatus } = useUserPosition();
 
+  //現在地基準の駅名標リストアップ機能
+  const { position, locationStatus } = useUserPosition();
   useEffect(() => {
     if (!position) return () => {};
     makeCurrentStation(position);
@@ -65,7 +65,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
   const makeCurrentStation = (location) => {
     if (!originalStationList) return () => {};
     const findStationEachLine = (selectLine) => {
-      const searchArea = stationListMode == "position" ? 0.07 : 0.002;
+      const searchArea = 0.12;
       const _calcDistance = (from, to) => {
         let lat = Math.abs(from.lat - to.lat);
         let lng = Math.abs(from.lng - to.lng);
@@ -78,11 +78,26 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
             lng: location.coords.longitude,
           }) < searchArea
       );
+      //NearStationを距離の近い順にソート
+      NearStation.sort((a, b) => {
+        return (
+          _calcDistance(a, {
+            lat: location.coords.latitude,
+            lng: location.coords.longitude,
+          }) -
+          _calcDistance(b, {
+            lat: location.coords.latitude,
+            lng: location.coords.longitude,
+          })
+        );
+      });
       return NearStation;
     };
 
     let returnDataBase = lineList
-      .map((d) => findStationEachLine(originalStationList[d]))
+      .map((d) => {
+        return findStationEachLine(originalStationList[d]);
+      })
       .filter((d) => {
         return d.length > 0;
       })
@@ -90,17 +105,16 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
         pre.push(...current);
         return pre;
       }, []);
+
     if (returnDataBase.length) {
-      let currentStation = currentStation == undefined ? [] : currentStation;
-      if (currentStation.toString() != returnDataBase.toString()) {
-        setNearPositionStation(returnDataBase);
-      }
+      const returnData = returnDataBase.map((d) => [d]);
+      setNearPositionStation(returnData);
     } else {
-      setNearPositionStation(undefined);
+      setNearPositionStation([]);
     }
   };
 
-  const [nearPositionStation, setNearPositionStation] = useState(undefined); //第三要素
+  const [nearPositionStation, setNearPositionStation] = useState([]); //第三要素
 
   const carouselRef = useRef();
   const [listIndex, setListIndex] = useState(0);
@@ -108,8 +122,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
   const [listUpStation, setListUpStation] = useState([]);
   useEffect(() => {
     if (stationListMode == "position") {
-      console.log(nearPositionStation);
-      setListUpStation([nearPositionStation].filter((d) => d != undefined));
+      setListUpStation(nearPositionStation.filter((d) => d != undefined));
     } else {
       setListUpStation(favoriteStation.filter((d) => d != undefined));
     }