我有一个关于显示指向某个位置的箭头的问题。
这就是我所拥有的:
您可以将当前位置保存在本地存储中。稍后，当您距离例如 30 米远时，您可以单击第二个按钮“显示到先前位置的方向!”获取指向您之前位置的箭头。这是一个移动网站，因此不是 native 应用。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<!-- JQUERY SCRIPT AND COMPASS SCRIPT AND MODERNIZR SCRIPT -->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<div class="container">
<h1>Find your location</h1>
<div class="row">
<div class="span12">
<!-- Save your current location -->
<button class="grey" id="btnFindLocation">Save my current location!</button> <br>
<!-- Show direction to previous location -->
<button class="grey" id="btnShowDirection">Show direction to previous location!</button> <br><br>
<!-- Arrow in direction to location -->
<img id="myarrow" class="deviceorientation" src="http://nielsvroman.be/tapcrowd/arrow.png" />
</div>
</div>
<script>
$(window).ready(function(){
// orientation object to save heading of the device
var orientation = {};
/* Find location button */
$("#btnFindLocation").click(findLocation);
/* Show direction button */
$("#btnShowDirection").click(showDirection);
// Device orientation
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", handleOrientation, false);
}
else{
alert("Device Orientation is not available");
}
function handleOrientation(orientData)
{
var alpha = orientData.alpha;
// To get the compass heading, one would simply subtract alpha from 360 degrees.
var heading = 360 - alpha;
orientation.value = heading;
}
function findLocation(){
// Check if geolocation is supported in browser
if (navigator.geolocation)
{
// Succes function: geoSucces Error function: geoError
navigator.geolocation.getCurrentPosition(geoSucces,geoError);
}
else
{
alert("Geolocation is not supported!");
}
}
function geoSucces(position)
{
// Check if localstorage is supported in browser
if (Modernizr.localstorage)
{
// Object declaration in localStorage
localStorage.setItem('position', '{}');
// Save position object in localstorage
localStorage.setItem('position', JSON.stringify(position));
}
else
{
alert("localStorage is not available!");
}
}
var watchProcess = null;
function showDirection(){
if (navigator.geolocation)
{
if (watchProcess == null) {
// Succes function: geoWatchSucces Error function: geoError
navigator.geolocation.watchPosition(geoWatchSucces,geoError);
}
}
else
{
alert("Geolocation is not supported!");
}
}
function geoWatchSucces(position)
{
// Check if localStorage is supported in browser
if (Modernizr.localstorage)
{
// Get previous location out of localstorage
var location = JSON.parse(localStorage.getItem('position'));
}
else
{
alert("localStorage is not available!");
}
// lat/lon of location in localstorage and current location
var lat1 = location.coords.latitude;
var lon1 = location.coords.longitude;
var lat2 = position.coords.latitude;
var lon2 = position.coords.longitude;
// angle to location
var angle = Math.atan2(lon2 - lon1, lat2 - lat1);
// degrees device
var degrees = orientation.value;
// degrees of device - angle
var result = degrees - angle;
// Set arrow to direction location
setArrowRotation(result);
}
// Stop monitoring location
function stopShowDirection() {
if (navigator.geolocation)
{
if (watchProcess != null)
{
navigator.geolocation.clearWatch(watchProcess);
watchProcess = null;
}
}
else
{
alert("Geolocation is not supported!");
}
}
// Error function geolocation
function geoError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED: alert("user did not share geolocation data");
break;
case error.POSITION_UNAVAILABLE: alert("could not detect current position");
break;
case error.TIMEOUT: alert("retrieving position timed out");
break;
default: alert("unknown error");
break;
}
}
// Functions to set direction arrow
function getsupportedprop(proparray){
var root=document.documentElement;
for (var i=0; i<proparray.length; i++){
if (proparray[i] in root.style){
return proparray[i];
}
}
return false;
}
var cssTransform;
function setArrowRotation(x){
if(cssTransform===undefined){
cssTransform=getsupportedprop(['transform','webkitTransform','MozTransform','OTransform','msTransform']);
}
if(cssTransform){
document.getElementById('myarrow').style[cssTransform]='rotate('+x+'deg)';
}
}
}); // END OF DOCUMENT READY
</script>
</body>
</html>
我所做的将箭头设置为先前位置的方向是: - 调用watchprocess函数 - 获取之前位置的纬度/经度+当前位置的纬度/经度 - 计算与先前位置的 Angular - 检查移动设备的度数 - 我用 deviceorientation 事件执行此操作，我读到设备的标题 = 360 - alpha(来源:http://dev.w3.org/geo/api/spec-source-orientation.html#introduction) - 最终 Angular 是移动设备的度数 - 之前计算的 Angular - 以该 Angular 设置箭头
但我总是得到奇怪的结果...... 当我之前的位置再远 10 米时，箭头在大多数情况下都不正确。
有谁知道我为什么会得到这个结果？
这是一个 jsfiddle:jsfiddle
提前致谢! 尼尔斯
最佳答案
您是否尝试过设置准确度？
navigator.geolocation.getCurrentPosition(geoSucces,geoError, {enableHighAccuracy: true});
关于javascript - 错误的结果箭头( Angular )到地理定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16604473/
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test
我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c
我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file
我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe
在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee
我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie
我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa
这个问题在这里已经有了答案:Arraysmisbehaving(1个回答)关闭6年前。是否应该这样，即我误解了，还是错误？a=Array.new(3,Array.new(3))a[1].fill('g')=>[["g","g","g"],["g","g","g"],["g","g","g"]]它不应该导致:=>[[nil,nil,nil],["g","g","g"],[nil,nil,nil]]
尝试在我的RoR应用程序中实现计数器缓存列时出现错误Unknownkey(s):counter_cache。我在这个问题中实现了模型关联:Modelassociationquestion这是我的迁移:classAddVideoVotesCountToVideos0Video.reset_column_informationVideo.find(:all).eachdo|p|p.update_attributes:videos_votes_count,p.video_votes.lengthendenddefself.downremove_column:videos,:video_vot