Spaces:
Sleeping
Sleeping
File size: 2,332 Bytes
47aea90 1ea9925 47aea90 02f2599 aeddb69 1c85f7a 0694fae 02f2599 a17a0ff f93f3ef a17a0ff aeddb69 a17a0ff f93f3ef aeddb69 f93f3ef aeddb69 f93f3ef 1ea9925 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<html>
<!doctype 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>
|