location

.firebase/hosting.YnVpbGQ.cache

@@ -1,15 +1,15 @@
 robots.txt,1725691795409,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5
 manifest.json,1725691795408,4368aeaf848ae2e048765562c289452f33ad2a175c4b1951ea8bdf2ada0d5b10
-index.html,1725749057871,effc881b82c9d3c89ee011b5ffb8dafb953803f2ac2de53235fe47d2f9983b74
 logo512.png,1725691795407,212b102aa09e51b3b3e06647e81f7801a61333e171f6582e8124379aabccb41d
 logo192.png,1725691795406,79e2b749561016bc8af300ea19f48347ceed3cb1a54f48ae456172eca45e08f0
-asset-manifest.json,1725749057871,a8269c53ccbff485f0c05c52cc060c9db9fb8241b26989acfeee1e5138bdfa55
 favicon.ico,1725691795404,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d
-static/js/main.db631921.js.LICENSE.txt,1725749057877,92ec6870e0d50ef16c11a5af58e8bae63fc674a797281dae6198d723b4582cff
-static/js/453.ed3810f9.chunk.js.map,1725749057877,b580f924df88443006fe2c2050df639443c362a4697c20b3a6bd730b8bbd83b0
-static/js/453.ed3810f9.chunk.js,1725749057877,ad49a5ec5043145417a4fe58d70d740daa4764cb309e9bb4bcc93dfbdf2b5643
-static/css/main.79d19d76.css,1725749057877,8532eb1bc08eefe39074a437fdd2823b7e14851191c7cd07f96140abf432a5b4
-static/css/main.79d19d76.css.map,1725749057877,863af17a469ff836e46a378ba7cf2a08b3d4a827991c0be88c37d888414ad7c9
-static/media/poster.0fad7cc42115f255a281.png,1725749057877,f3025012e905a2fd748b83ff036dc7fd5dbc6b6aa6493435a0c7a60db866b5bf
-static/js/main.db631921.js,1725749057878,8665bc87d6ae3290e1fcd49e18c2c356b1bafd522c781980eb1048fd9ed4f032
-static/js/main.db631921.js.map,1725749057878,906088b6f783d5ea680d84a43f521330163825d2a8fa738b7546888a52ab1dfd
+index.html,1725753484979,153961d4989c6d46bcc5c97b2e9c10d3790e35a5d888ceb86d3098fcdb5b430c
+asset-manifest.json,1725753484979,22c4614a5b692c852c53d856a32c2abffa3a164ccde683a3ba3351f9b4202082
+static/js/main.ec691045.js.LICENSE.txt,1725753484993,30f88fcb7f8d73132245dec8d321969add3035e37dbd531f61107e638f8efae4
+static/js/453.ed3810f9.chunk.js,1725753484993,ad49a5ec5043145417a4fe58d70d740daa4764cb309e9bb4bcc93dfbdf2b5643
+static/js/453.ed3810f9.chunk.js.map,1725753484995,b580f924df88443006fe2c2050df639443c362a4697c20b3a6bd730b8bbd83b0
+static/css/main.79d19d76.css,1725753484993,8532eb1bc08eefe39074a437fdd2823b7e14851191c7cd07f96140abf432a5b4
+static/css/main.79d19d76.css.map,1725753484995,863af17a469ff836e46a378ba7cf2a08b3d4a827991c0be88c37d888414ad7c9
+static/media/poster.0fad7cc42115f255a281.png,1725753484993,f3025012e905a2fd748b83ff036dc7fd5dbc6b6aa6493435a0c7a60db866b5bf
+static/js/main.ec691045.js,1725753484995,849f70ba603fde8c7486961ea3fb0ffc350c24a351254ff97759f3b3900e6d41
+static/js/main.ec691045.js.map,1725753484995,88483bea13905e9d56d917ffdbb246fd33d6bc708e8f0e9322b38a2046e6fb4a

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-google-maps/api": "^2.19.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -12,6 +12,9 @@ import Gallery from './components/Gallery.js';
 import MapComponent from './components/ArtMap.js';
 import DetailComponent from './components/ArtDetail.js';
 
+import ArtInfo from './components/record.js';
+import Component from './components/GetLocation.js';
+
 //////////////// json data //////////////////
 import artDataJson from './data/artData.json'; 
 
@@ -37,12 +40,13 @@ function App() {
           {/* <Route path="/dynamic-map" element={<MapComponent />} /> */}
 
           {/* 我的地點頁面 */}
-         {/* <Route 
+         <Route 
             path="/check-in-history" 
-            element={<MyPlace userId="" />} 
-          /> */}
-
+            element={<ArtInfo userId="" />} 
+          />
         </Routes>
+
+
       </Router>
     </div>
   );

src/components/ArtDetail.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Link } from "react-router-dom";
-
 import artDataJson from '../data/artData.json';
-
+import { getCurrentLocation } from './GetLocation';  // 匯入位置取得函數
 
 // Haversine formula to calculate distance between two lat/lon points
 const haversineDistance = (coords1, coords2) => {
@@ -25,44 +24,77 @@ const DetailComponent = () => {
   const { artId } = useParams(); // Get artId from route parameters
   const [artPiece, setArtPiece] = useState(null);
   const [distance, setDistance] = useState(null);
-
-  // 假設我們在台北市中心(25.0330, 121.5654)
-  const currentLocation = {
-    latitude: 25.0330,
-    longitude: 121.5654
-  };
+  const [currentLocation, setCurrentLocation] = useState(null); // 使用者位置狀態
+  const [error, setError] = useState(null);
+
+  // 用於不斷嘗試取得位置資料，直到成功或達到最大次數
+  useEffect(() => {
+    let intervalId;
+    let maxAttempts = 10; // 最大嘗試次數
+    let attemptCount = 0;
+
+    const fetchLocation = () => {
+      getCurrentLocation()
+        .then((location) => {
+          setCurrentLocation(location);
+          clearInterval(intervalId); // 成功取得位置後清除定時器
+        })
+        .catch((err) => {
+          console.error(err);
+          attemptCount++;
+          if (attemptCount >= maxAttempts) {
+            setError("無法取得您的位置，請啟用定位服務或稍後重試");
+            clearInterval(intervalId); // 達到最大次數後停止嘗試
+          }
+        });
+    };
+
+    // 每2秒嘗試取得一次位置
+    intervalId = setInterval(fetchLocation, 2000);
 
+    // 在組件卸載時清除定時器
+    return () => clearInterval(intervalId);
+  }, []);
+
+  // 根據使用者位置和藝術品位置計算距離
   useEffect(() => {
+
     // Find the art piece in local JSON data
     const piece = artDataJson.find(p => p.系統編號 === artId);
     setArtPiece(piece);
 
-    if (piece) {
-      // Calculate the distance
+    if (piece && currentLocation) {
+      // 確保緯度和經度是數字
       const artLocation = {
-        latitude: parseFloat(piece.緯度),
-        longitude: parseFloat(piece.經度)
+        latitude: Number(piece.緯度), // 使用 Number() 來轉換為數字
+        longitude: Number(piece.經度)
       };
+
+      currentLocation.latitude = Number(currentLocation.lat);
+      currentLocation.longitude = Number(currentLocation.lng);
+
+      // 計算距離
       const calculatedDistance = haversineDistance(currentLocation, artLocation).toFixed(1);
-      setDistance(calculatedDistance);
+      setDistance(calculatedDistance)
     }
-  }, [artId]);
+  }, [artId, currentLocation]); // 依賴 currentLocation 來重新計算距離
 
-  if (!artPiece) return <p>加載中...</p>;
+  // 檢查 currentLocation 是否存在，否則不渲染
+  if (!artPiece || !currentLocation) return <p>加載中...</p>;
 
   const isCheckInEnabled = distance && distance < 50;
 
   return (
     <div className="container my-5">
       <div className="card">
         <div className="card-body">
-          <h2 className="card-title" class="font-H1-semibold">{artPiece.作品名稱}</h2>
+          <h2 className="card-title">{artPiece.作品名稱}</h2>
           <p className="card-text">作者: {artPiece.作者}</p>
           <p className="card-text">設置地點: {artPiece.設置地點}</p>
           <p className="card-text">場域: {artPiece.場域}</p>
           <p className="card-text">{artPiece.作品說明}</p>
           <img src={artPiece.主圖} alt={artPiece.作品名稱} className="img-fluid mb-3" style={{ width: "300px" }} />
-          
+
           {distance && (
             <p className="card-text">
               距離當前位置: {distance < 1000 ? `${distance} 公尺` : `${(distance / 1000).toFixed(2)} 公里`}
@@ -78,8 +110,9 @@ const DetailComponent = () => {
                 {isCheckInEnabled ? "打卡" : `距離需小於50公尺，當前距離: ${distance} 公尺`}
               </button>
             </span>
-
           </div>
+
+          {error && <p style={{ color: 'red' }}>{error}</p>}
         </div>
       </div>
     </div>