警报问题 - 使用Harvesine距离公式的地理位置公式

问题描述：

我一直在学习由Nikil Abraham编码为傻瓜编码。在这本书中有一个项目，其中包含的代码用于开发一个餐厅的应用程序，在点击登记按钮时，餐厅的优惠券在餐厅步行5至10分钟内向客户发送警报。警报问题 - 使用Harvesine距离公式的地理位置公式

我输入了所有使用html，css和javascript通过codepen的代码，并且由于某种原因警报不会弹出。

我研究了哪里可能会出错，但我真的被卡住了。

下面是代码：

在HTML：

<head> 
<title>McDuck's App</title> 
</head> 
<body> 
<h1>McDuck's Local Offers</h1> 

<button onclick="getLocation()">CheckIn</button> 

<div id="geodisplay"/> 
<div id="effect"/> 


</body>

的CSS：

body { 
text-align: center; 
background: white; 
} 

h1, h2, h3, p { 
font-family: Sans-Serif; 
color: black; 
} 

p { 
font-size: 1em; 
}

的JavaScript：

function getLocation() { 
if (navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(showLocation); 
} 
}

//商店位置

function showLocation(position){ 
var mcduckslat=53.510207; 
var mcduckslon=-6.399289;

//当前位置

var currentpositionlat=position.coords.latitude; 
var currentpositionlon=position.coords.longitude;

//计算当前的位置和McDuck的位置之间的距离

var distance=getDistanceFromLatLonInMiles(mcduckslat, mcduckslon,  
currentpositionlat, currentpositionlon); 

//displays the locaton using .inner.HTML property and the lat & long  
coordinates from your current location 

document.getElementById("geodisplay").inner.HTML="Latitude: " +  
currentpositionlat + "<br>Longitude: " + currentpositionlon; 

} 

//haversine distance formula 

    function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) { 
    var R = 6371; //Radius of earth in km 
    var dLat = deg2rad(lat2-lat1); 
    var dLon = deg2rad(lon2-lon1); 
    var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) + 
    Math.cos(deg2rad(lat1)) *        
    Math.cos(deg2rad(lat2)) *  
    Math.sin(dLon/2) * Math.sin(dLon/2); 

var c = 2 * Math.atan2(Math.sqrt(a), 
      Math.sqrt(1-a)); 
var d = R * c * 0.372823; //Distance in miles           
return d; 
} 

function deg2rad(deg) { 
    return deg * (Math.PI/180); 
} 

alert(distance); 

if (distance < 0.5) { 
alert("You get a free meal"); 
} 
else { 
alert("Thanks for checking in!"); 
}

链接到copepen http://codepen.io/Saharalara/pen/Grxmmj

我的回答对你有帮助吗？点击我答案顶部的链接查看解决方案的工作情况。 – taylorsabell

答

TL; DR：这是看到它工作的小提琴荷兰国际集团：https://jsfiddle.net/pnruje2g/6/

与此摆弄了一会儿后，我发现4点的问题。

第一个是在Chrome浏览器的非HTTPS环境（如CodePen）中弃用getCurrentPosition（）。

这里有确切消息我在谷歌浏览器获得：

getCurrentPosition（）和watchPosition（）在不安全起源不再起作用。要使用此功能，您应该考虑将您的应用程序切换到安全来源，例如HTTPS。有关更多详细信息，请参阅 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins。

如果您使用的是Google Chrome浏览器，则可能需要在其他浏览器中试用此功能。它确实在本地网站上工作。

下一个问题是调用不存在的函数getDistanceFromLatLonInMiles()。我通过致电getDistanceFromLatLonInKm()取代了它。

第三个问题是试图分配一个不存在的属性，您引用inner.HTML而不是innerHTML。

第四个问题是警报的位置。目前他们只是坐在你的JS文件的底部，没有做任何事情。我们希望在完成计算后显示警报。我将您的提醒移至showLocation()函数的末尾。

这听起来像是你正在进入软件开发，所以绝对不会感到所有这些问题不知所措。随着时间的推移，它会变得更容易。

让我知道这是否有帮助。

它的工作！非常感谢你的帮助。真的帮助我了解更多。我有一种感觉，英里有一个问题。再次感谢，真的很感激它！ – Sarah

警报问题 - 使用Harvesine距离公式的地理位置公式

相关推荐