轮询手机 GPS 位置的网络应用程序,显示指南针指向第二个固定点

问题描述 投票:0回答:2

作为一名新手程序员的个人宠物项目,我希望制作一个网络应用程序来轮询iPhone上的gps数据,然后计算到预定点的距离。然后使用半正矢公式计算/更新距离。我还想要一个指南针,在 iPhone 上显示静止点的方向。解决这个问题最简单的方法是什么?

javascript iphone css web gps
2个回答
0
投票

我确信您已经搜索过 iOS 版地理定位。关键字将是 CoreLocation(您将导入到应用程序中的本机库。这使您能够开箱即用地获取当前位置的 GPS 坐标。

通过“预定点”,我假设您正在访问一些存储位置的数据库(即超市、酒吧 xyz 等?)。只需弄清楚如何进行投票即可。

现在您已经获得了两对坐标(我在哪里/我要去哪里)。有大量的地图 api 可供摆弄,数学已经融入其中。:) 祝你好运。


0
投票

这里有一个 html 页面可以做到这一点。

注意事项: 罗盘图片:compass-rose.png 需要替换为您自己的罗盘图片,或者您可以使用合适的占位符。

测试:确保在支持所需功能的设备上进行测试,并确保在部署时使用 HTTPS,因为许多浏览器限制对安全上下文的地理位置访问。

错误处理:您可能希望根据特定需求或更详细的用户反馈来扩展错误处理。 精度和更新:考虑添加一种通过使用 watchPosition 而不是 getCurrentPosition 来持续更新位置的方法,以实现实时跟踪场景。

此设置为您提供了根据项目要求进一步定制和扩展的功能基础!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPS Distance and Compass</title>
    <style>
        #compass {
            width: 100px;
            height: 100px;
            border: 5px solid black;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url('compass-rose.png'); /* Make sure to replace with your compass rose image */
            background-size: cover;
            transition: transform 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <button onclick="getLocation()">Get My Location</button>
    <div id="distance">Distance: Waiting...</div>
    <div id="compass">Compass: Waiting...</div>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }

        function showPosition(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            calculateDistance(latitude, longitude);
            updateCompass(latitude, longitude);
        }

        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unknown error occurred.");
                    break;
            }
        }

        function calculateDistance(lat1, lon1) {
            const lat2 = 40.7128; // Example: New York latitude
            const lon2 = -74.0060; // Example: New York longitude
            const R = 6371e3; // Radius of Earth in meters

            const φ1 = lat1 * Math.PI/180;
            const φ2 = lat2 * Math.PI/180;
            const Δφ = (lat2-lat1) * Math.PI/180;
            const Δλ = (lon2-lon1) * Math.PI/180;

            const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
                      Math.cos(φ1) * Math.cos(φ2) *
                      Math.sin(Δλ/2) * Math.sin(Δλ/2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

            const distance = R * c; // Distance in meters
            document.getElementById('distance').innerText = 'Distance: ' + (distance/1000).toFixed(2) + ' km';
        }

        function updateCompass(lat1, lon1) {
            const lat2 = 40.7128; // Example: New York latitude
            const lon2 = -74.0060; // Example: New York longitude
            const y = Math.sin(lon2 - lon1) * Math.cos(lat2);
            const x = Math.cos(lat1) * Math.sin(lat2) -
                      Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
            const bearingRadians = Math.atan2(y, x);
            const bearingDegrees = (bearingRadians * 180 / Math.PI + 360) % 360;
            document.getElementById('compass').style.transform = `rotate(${bearingDegrees}deg)`;
            document.getElementById('compass').innerText = ''; // Remove 'Waiting...'
        }
    </script>
</body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.