Spaces:
Sleeping
Sleeping
| <html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>ar-treasure-hunt</title> | |
| <script type="module" crossorigin src="/assets/index-CmvnucJ2.js"></script> | |
| <link rel="stylesheet" crossorigin href="/assets/index-DFxvSKg-.css"> | |
| </head> | |
| <body> | |
| <div id="container" style="position: relative; width: 100%; height: 100vh; overflow: hidden;"> | |
| <!-- 相機畫面最下層 --> | |
| <video id="video" autoplay muted playsinline style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;"></video> | |
| <!-- 地圖透明層（中層） --> | |
| <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; pointer-events: none; z-index: 2;"></div> | |
| <!-- 問號遊戲最上層 --> | |
| <div id="game" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: transparent;"> | |
| <div id="root" style="background: transparent;"></div> | |
| </div> <!-- end of #game --> | |
| <script> | |
| // 啟用相機 | |
| navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }, audio: false }) | |
| .then(function(stream) { | |
| document.getElementById("video").srcObject = stream; | |
| }) | |
| .catch(function(err) { | |
| console.error("無法啟動相機: " + err); | |
| }); | |
| // 初始化地圖 | |
| function initMap() { | |
| const map = new google.maps.Map(document.getElementById("map"), { | |
| center: { lat: 25.033964, lng: 121.564468 }, | |
| zoom: 16, | |
| disableDefaultUI: true, | |
| }); | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition( | |
| (position) => { | |
| const pos = { | |
| lat: position.coords.latitude, | |
| lng: position.coords.longitude, | |
| }; | |
| new google.maps.Marker({ | |
| position: pos, | |
| map: map, | |
| title: "你在這裡", | |
| }); | |
| map.setCenter(pos); | |
| }, | |
| () => { | |
| alert("無法取得您的位置"); | |
| } | |
| ); | |
| } | |
| } | |
| </script> | |
| <script async defer | |
| src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbaJdQHiF6SgKES_3NvwPV-Xu9h8ROYZs&callback=initMap"> | |
| </script> | |
| </body> | |
| </html> | |