我可以使用 Javascript 来获取 iOS 和 Android 的指南针方向吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16048514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use Javascript to get the compass heading for iOS and Android?
提问by Sean W.
Can I use Javascript in a cross-platform way to get the compass heading in iOS and Android (with Chrome), without using something like PhoneGap? I know iOS has DeviceOrientationEvent, but I can't find any equivalent on Chrome for Android.
我可以以跨平台的方式使用 Javascript 来获取 iOS 和 Android（使用 Chrome）中的指南针方向，而不使用 PhoneGap 之类的东西吗？我知道 iOS 有DeviceOrientationEvent，但我在 Chrome for Android 上找不到任何等效项。
采纳答案by Jonny
Yes you can! Unfortunately the alphadoesn't work on iPhones/iPads. With Mobile Safari, alphais based on the direction the device was pointing when device orientation was first requested. The included webkit offers you the compass heading. To make it work for all other browsers (which all supports alphaas compassheading) you can use the following Javascript code:
是的你可以！不幸的是，alpha它不适用于 iPhone/iPad。对于 Mobile Safari，alpha基于首次请求设备方向时设备所指向的方向。包含的 webkit 为您提供指南针航向。要使其适用于所有其他浏览器（都支持alphaas compassheading），您可以使用以下 Javascript 代码：
if (window.DeviceOrientationEvent) {
// Listen for the deviceorientation event and handle the raw data
window.addEventListener('deviceorientation', function(eventData) {
var compassdir;
if(event.webkitCompassHeading) {
// Apple works only with this, alpha doesn't work
compassdir = event.webkitCompassHeading;
}
else compassdir = event.alpha;
});
}
Android also supports Webkit, so would also use event.webkitCompassHeading, but that's OK.
Android 也支持 Webkit，所以也会使用 event.webkitCompassHeading，不过没关系。
BTW: "oncompassneedscalibration" is also not supported for iPhones and iPads.
顺便说一句：oncompassneedscalibrationiPhone 和 iPad 也不支持“ ”。
回答by richt
As a primer you should review this previous related StackOverflow answerand be familiar with the general practical considerations for using DeviceOrientation Eventsin web applications.
作为入门，您应该查看之前相关的 StackOverflow 答案，并熟悉在 Web 应用程序中使用 DeviceOrientation 事件的一般实际注意事项。
The simple solution I provided in my previous related StackOverflow answeronly applies to browsers that implement absolutedeviceorientation events (i.e. browsers where the deviceorientation alphaproperty is compass-oriented). That means the solution provided there currently only works in Android browsers and not iOS-based browsers or any other browser that does not provide absolute-based deviceorientation event data.
我在之前的相关 StackOverflow 回答中提供的简单解决方案仅适用于实现absolutedeviceorientation 事件的浏览器（即 deviceorientationalpha属性是面向罗盘的浏览器）。这意味着那里提供的解决方案目前仅适用于 Android 浏览器，而不适用于基于 iOS 的浏览器或任何其他不提供absolute基于设备方向事件数据的浏览器。
To reliably obtain the current compass heading across both Android and iOS browsers today you need to handle both absoluteand non-absoluteimplementations that provide the additional webkitCompassHeadingproperty and make sure to account for any current screen orientation changes as part of that. AFAIK the only library that currently does this is Full Tilt JS(disclaimer: I am the author of this library).
今天，为了可靠地获取 Android 和 iOS 浏览器中的当前指南针方向，您需要处理提供附加属性的实现absolute和非absolute实现，webkitCompassHeading并确保将当前屏幕方向的任何变化都考虑在内。AFAIK 目前执行此操作的唯一库是Full Tilt JS（免责声明：我是该库的作者）。
The following code will give you the same correct compass heading across both iOS and Android browsers, taking account of the differences in device orientation implementations and applying any necessary runtime screen orientation transforms too:
以下代码将在 iOS 和 Android 浏览器中为您提供相同的正确指南针方向，考虑到设备方向实现的差异并应用任何必要的运行时屏幕方向转换：
<!-- Include the Full Tilt JS library from https://github.com/richtr/Full-Tilt-JS -->
<script src="fulltilt-min.js"></script>
<script>
// Obtain a new *world-oriented* Full Tilt JS DeviceOrientation Promise
var promise = FULLTILT.getDeviceOrientation({ 'type': 'world' });
// Wait for Promise result
promise.then(function(deviceOrientation) { // Device Orientation Events are supported
// Register a callback to run every time a new
// deviceorientation event is fired by the browser.
deviceOrientation.listen(function() {
// Get the current *screen-adjusted* device orientation angles
var currentOrientation = deviceOrientation.getScreenAdjustedEuler();
// Calculate the current compass heading that the user is 'looking at' (in degrees)
var compassHeading = 360 - currentOrientation.alpha;
// Do something with `compassHeading` here...
});
}).catch(function(errorMessage) { // Device Orientation Events are not supported
console.log(errorMessage);
// Implement some fallback controls here...
});
</script>
Here is a demothat demonstrates this technique to obtain the compass heading the user is facing. It should work well on both iOS and Android browsers.
这是一个演示，演示了这种获取用户面对的罗盘航向的技术。它应该适用于 iOS 和 Android 浏览器。
The implementation of the code in that demo is as shown above and can be viewed on Github at ./scripts/compass.js:L268-L272.
该演示中代码的实现如上所示，可以在 Github 上查看./scripts/compass.js:L268-L272。
回答by santamanno
I believe you can use the "heading" field of the location object, from navigator.geolocation, please see here:
我相信你可以使用位置对象的“标题”字段，来自 navigator.geolocation，请看这里：
https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation
https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation
I know no other way.
我不知道其他方法。
Hope it helps, A.
希望有帮助，A。
