Javascript 带有指南针和GPS坐标的Phonegap
我正在做一个项目，从Phonegap获取指南针脚本，我想将它连接到我当前的GPS位置，然后指向一个固定的GPS位置（如餐厅等）。基本上箭头必须指向餐厅的方向，以便我知道去/走哪条路 以下是我想结合的两个方面： http://docs.phonegap.com/en/2.0.0/cordova_compass_compass.md.html#Compass 我以这个项目为基础： 谁能帮我找到正确的方向：-）Javascript 带有指南针和GPS坐标的Phonegap,javascript,cordova,geolocation,compass-geolocation,Javascript,Cordova,Geolocation,Compass Geolocation,我正在做一个项目，从Phonegap获取指南针脚本，我想将它连接到我当前的GPS位置，然后指向一个固定的GPS位置（如餐厅等）。基本上箭头必须指向餐厅的方向，以便我知道去/走哪条路 以下是我想结合的两个方面： http://docs.phonegap.com/en/2.0.0/cordova_compass_compass.md.html#Compass 我以这个项目为基础： 谁能帮我找到正确的方向：-） Thnx-Ewald以下代码基本上满足了您的需要。它计算从当前位置（通过GPS）到目标位置
Thnx-Ewald以下代码基本上满足了您的需要。它计算从当前位置（通过GPS）到目标位置的距离和方位，并使用指南针确定当前航向。当前航向和目标方位之间的差异是箭头的角度 可以从以下位置下载带有资产和编译的Android APK的代码： 这是代码，希望有帮助
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Compass test</title>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src ="jquery-1.7.1.min.js">//</script> <!--http://code.jquery.com/jquery-1.7.1.min.js -->
<script type="text/javascript" src ="latlon.js">//</script> <!-- based on http://www.movable-type.co.uk/scripts/latlong.html -->
<style type="text/css">
#error, #results{
display: none;
}
#arrow{
position: absolute;
width: 30px;
height: 30px;
background: 50% 50% no-repeat;
background-size: 30px 30px;
background-image: url('arrow.png');
top: 0;
left: 50%;
margin: 30px 0 0 -15px;
}
#results .text{
margin-top: 100px;
}
</style>
<script type="text/javascript" >
var destinationPosition;
var destinationBearing;
var positionTimerId;
var currentPosition;
var prevPosition;
var prevPositionError;
var compassTimerId;
var currentHeading;
var prevHeading;
var prevCompassErrorCode;
$(document).on("deviceready", function() {
minPositionAccuracy = 50; // Minimum accuracy in metres to accept as a reliable position
minUpdateDistance = 1; // Minimum number of metres to move before updating distance to destination
$targetLat = $('#target-lat');
$targetLon = $('#target-lon');
$error = $('#error');
$results = $('#results');
$distance = $('#distance');
$bearing = $('#bearing');
$heading = $('#heading');
$difference = $('#difference');
$arrow = $('#arrow');
watchPosition();
watchCompass();
// Set destination
$targetLat.change(updateDestination);
$targetLon.change(updateDestination);
updateDestination();
});
function watchPosition(){
if(positionTimerId) navigator.geolocation.clearWatch(positionTimerId);
positionTimerId = navigator.geolocation.watchPosition(onPositionUpdate, onPositionError, {
enableHighAccuracy: true,
timeout: 1000,
maxiumumAge: 0
});
}
function watchCompass(){
if(compassTimerId) navigator.compass.clearWatch(compassTimerId);
compassTimerId = navigator.compass.watchHeading(onCompassUpdate, onCompassError, {
frequency: 100 // Update interval in ms
});
}
function onPositionUpdate(position){
if(position.coords.accuracy > minPositionAccuracy) return;
prevPosition = currentPosition;
currentPosition = new LatLon(position.coords.latitude, position.coords.longitude);
if(prevPosition && prevPosition.distanceTo(currentPosition)*1000 < minUpdateDistance) return;
updatePositions();
}
function onPositionError(error){
watchPosition();
if(prevPositionError && prevPositionError.code == error.code && prevPositionError.message == error.message) return;
$error.html("Error while retrieving current position. <br/>Error code: " + error.code + "<br/>Message: " + error.message);
if(!$error.is(":visible")){
$error.show();
$results.hide();
}
prevPositionError = {
code: error.code,
message: error.message
};
}
function onCompassUpdate(heading){
prevHeading = currentHeading;
currentHeading = heading.trueHeading >= 0 ? Math.round(heading.trueHeading) : Math.round(heading.magneticHeading);
if(currentHeading == prevHeading) return;
updateHeading();
}
function onCompassError(error){
watchCompass();
if(prevCompassErrorCode && prevCompassErrorCode == error.code) return;
var errorType;
switch(error.code){
case 1:
errorType = "Compass not supported";
break;
case 2:
errorType = "Compass internal error";
break;
default:
errorType = "Unknown compass error";
}
$error.html("Error while retrieving compass heading: "+errorType);
if(!$error.is(":visible")){
$error.show();
$results.hide();
}
prevCompassErrorCode = error.code;
}
function updateDestination(){
destinationPosition = new LatLon($targetLat.val(), $targetLon.val());
updatePositions();
}
function updatePositions(){
if(!currentPosition) return;
if(!$results.is(":visible")){
$results.show();
$error.hide();
}
destinationBearing = Math.round(currentPosition.bearingTo(destinationPosition));
$distance.html(Math.round(currentPosition.distanceTo(destinationPosition)*1000));
$bearing.html(destinationBearing);
updateDifference();
}
function updateHeading(){
$heading.html(currentHeading);
updateDifference();
}
function updateDifference(){
var diff = destinationBearing - currentHeading;
$difference.html(diff);
$arrow.css("-webkit-transform", "rotate("+diff+"deg)");
}
</script>
</head>
<body>
<div id="results">
<div id="arrow"></div>
<div class="text">
<p>Distance to destination: <span id="distance"></span> metres</p>
<p>Bearing to destination: <span id="bearing"></span> degrees</p>
<p>Current heading: <span id="heading"></span> degrees</p>
<p>Difference in heading and bearing: <span id="difference"></span> degrees</p>
</div>
</div>
<p id="error"></p>
<h2>Destination</h2>
<div>
<label for="target-lat">Latitude: </label>
<input id="target-lat" value="50.623966949462" />
</div>
<div>
<label for="target-lon">Longitude: </label>
<input id="target-lon" value="-4.7256830197787" />
</div>
</body>
</html>
罗盘测试
//
//
#错误，#结果{
显示：无；
}
#箭{
位置：绝对位置；
宽度：30px；
高度：30px；
背景：50%50%无重复；
背景尺寸：30px 30px；
背景图片：url（'arrow.png'）；
排名：0；
左：50%；
利润率：30px0-15px；
}
#结果.文本{
边缘顶部：100px；
}
目标位置；
目的轴承；
var-positionTimerId；
无功电流位置；
var前置位置；
var误差；
var compassTimerId；
var电流方向；
var预标题；
var-prevCompassErrorCode；
$（文档）.on（“deviceready”，函数（）{
MinPositionAccurance=50；//接受为可靠位置的最小精度（以米为单位）
minUpdateDistance=1；//更新到目标的距离之前要移动的最小米数
$targetLat=$（“#目标lat”）；
$targetLon=$（“#target lon”）；
$error=$（“#error”）；
$results=$（“#results”）；
$distance=$（“#distance”）；
$轴承=$（“#轴承”）；
$heading=$（“#heading”）；
$difference=$（“#difference”）；
$arrow=$（“#arrow”）；
watchPosition（）；
手表指南针（）；
//设定目的地
$targetLat.change（更新目标）；
$targetLon.change（更新目标）；
updateDestination（）；
});
函数watchPosition（）{
if（positionTimerId）navigator.geolocation.clearWatch（positionTimerId）；
positionTimerId=navigator.geolocation.watchPosition（onPositionUpdate，onPositionError{
EnableHighAccurance:正确，
超时：1000，
最大年龄：0
});
}
函数watchCompass（）{
if（compassTimerId）navigator.compass.clearWatch（compassTimerId）；
compassTimerId=navigator.compass.watchHeading（onCompassUpdate，onCompassError{
频率：100//更新间隔（毫秒）
});
}
位置更新功能（位置）{
if（position.coords.accurity>minpositionaccurity）返回；
prevPosition=当前位置；
currentPosition=新纬度（position.coords.lation，position.coords.longitude）；
如果（prevPosition&&prevPosition.distanceTo（currentPosition）*1000<分钟更新距离）返回；
更新位置（）；
}
函数onPositionError（错误）{
watchPosition（）；
if（prevPositionError&&prevPositionError.code==error.code&&prevPositionError.message==error.message）返回；
$error.html（“检索当前位置时出错。
错误代码：“+error.code+”
消息：“+error.Message”）；
如果（！$error.is（“：visible”））{
$error.show（）；
$results.hide（）；
}
prevPositionError={
代码：error.code，
消息：error.message
};
}
比较更新功能（标题）{
前航向=当前航向；
currentHeading=heading.trueHeading>=0？数学圆整（heading.trueHeading）：数学圆整（heading.magneticHeading）；
如果（currentHeading==prevHeading）返回；
更新标题（）；
}
比较错误的函数（错误）{
手表指南针（）；
if（prevCompassErrorCode&&prevCompassErrorCode==error.code）返回；
var错误类型；
开关（错误代码）{
案例1：
errorType=“不支持指南针”；
打破
案例2：
errorType=“指南针内部错误”；
打破
违约：
errorType=“未知罗盘错误”；
}
$error.html（“检索指南针航向时出错：“+errorType”）；
如果（！$error.is（“：visible”））{
$error.show（）；
$results.hide（）；
}
prevCompassErrorCode=error.code；
}
函数updateDestination（）{
destinationPosition=new LatLon（$targetLat.val（），$targetLon.val（））；
更新位置（）；
}
函数updatePositions（）{
如果（！currentPosition）返回；
如果（！$results.is（“：visible”））{
$results.show（）；
$error.hide（）；
}
destinationBearing=数学圆（currentPosition.bearingTo（destinationPosition））；
$distance.html（Math.round（currentPosition.distanceTo（destinationPosition）*1000））；
$beari