Update index.html

index.html

@@ -25,14 +25,26 @@
 
         .marker {
             position: absolute;
-            width: 10px;
-            height: 10px;
+            width: 14px;
+            height: 14px;
             background-color: red;
             border-radius: 50%;
             transform: translate(-50%, -50%);
         }
 
-        #message, #coordinates {
+        .arrow {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 10px solid blue;
+            transform: translate(-50%, -50%) rotate(0deg);
+        }
+
+        #message, #coordinates, #compass {
             text-align: center;
             margin-top: 10px;
         }
@@ -42,13 +54,13 @@
             font-weight: bold;
         }
 
-        #coordinates {
+        #coordinates, #compass {
             font-family: monospace;
         }
 
         i.fab {
-      font-size: 24px;
-      color: #000;
+            font-size: 24px;
+            color: #000;
         }
     </style>
 </head>
@@ -57,12 +69,15 @@ <h1>XJTLU地图</h1>
     <h2>刷新以当前位置显示</h2>
     <a href="https://github.com/Catherina0/XJTLUmap" target="_blank">
         <i class="fab fa-github"></i>
-      </a>
+    </a>
     <div id="map-container">
         <div id="map"></div>
-        <div class="marker" id="marker"></div>
+        <div class="marker" id="marker">
+            <div class="arrow" id="arrow"></div>
+        </div>
     </div>
     <div id="coordinates"></div>
+    <div id="compass"></div>
     <div id="message"></div>
 
     <script>
@@ -136,6 +151,28 @@ <h2>刷新以当前位置显示</h2>
             }
         }
 
+        function handleOrientation(event) {
+            const arrow = document.getElementById('arrow');
+            const compass = document.getElementById('compass');
+
+            if (event.webkitCompassHeading) {
+                // For iOS devices
+                compassHeading = event.webkitCompassHeading;
+            } else if (event.alpha) {
+                // For Android devices
+                compassHeading = event.alpha;
+            } else {
+                compass.textContent = "无法获取方向信息";
+                return;
+            }
+
+            // Rotate the arrow
+            arrow.style.transform = `translate(-50%, -50%) rotate(${compassHeading}deg)`;
+
+            // Display compass heading
+            compass.textContent = `方向: ${Math.round(compassHeading)}°`;
+        }
+
         // Test
         /*
         const testPosition = {
@@ -146,17 +183,34 @@ <h2>刷新以当前位置显示</h2>
         };
         showPosition(testPosition);
         */
+
+        // Request device orientation permission and start listening for orientation changes
+        if (typeof DeviceOrientationEvent.requestPermission === 'function') {
+            // For iOS 13+
+            DeviceOrientationEvent.requestPermission()
+                .then(permissionState => {
+                    if (permissionState === 'granted') {
+                        window.addEventListener('deviceorientation', handleOrientation);
+                    } else {
+                        document.getElementById('compass').textContent = "方向权限被拒绝";
+                    }
+                })
+                .catch(console.error);
+        } else {
+            // For non-iOS devices or older iOS versions
+            window.addEventListener('deviceorientation', handleOrientation);
+        }
 
         // Production
-
+        
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(showPosition, showError);
         } else {
             document.getElementById('message').textContent = "该浏览器不支持定位。";
             document.getElementById('coordinates').textContent = '';
         }
-
+        
     </script>
 </body>
-<p>Producted by Catherina Grace</p>
+<p>"Produced by Catherina Grace"</p>
 </html>