作为一名新手程序员的个人宠物项目,我希望制作一个网络应用程序来轮询iPhone上的gps数据,然后计算到预定点的距离。然后使用半正矢公式计算/更新距离。我还想要一个指南针,在 iPhone 上显示静止点的方向。解决这个问题最简单的方法是什么?
我确信您已经搜索过 iOS 版地理定位。关键字将是 CoreLocation(您将导入到应用程序中的本机库。这使您能够开箱即用地获取当前位置的 GPS 坐标。
通过“预定点”,我假设您正在访问一些存储位置的数据库(即超市、酒吧 xyz 等?)。只需弄清楚如何进行投票即可。
现在您已经获得了两对坐标(我在哪里/我要去哪里)。有大量的地图 api 可供摆弄,数学已经融入其中。:) 祝你好运。
这里有一个 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>