我可以使用JavaScript来获取iOS和Android的指南针标题吗？

我能否以跨平台的方式使用JavaScript来获取iOS和Android（使用Chrome）的指南针标题，而不使用PhoneGap之类的东西？ 我知道iOS有DeviceOrientationEvent ，但我无法在Android版Chrome上find任何对等设备。

Answer 1

是的你可以！ 不幸的是， alpha不能在iPhone / iPad上运行。 使用移动Safari时， alpha是基于设备朝向的方向。 包含的webkit为您提供指南针标题。 要使其适用于所有其他浏览器（都支持alpha作为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也支持Webkit，所以也会使用event.webkitCompassHeading，但是没关系。

顺便说一句：“ oncompassneedscalibration ”也不支持iPhone和iPad。

Answer 2

作为一个入门书，您应该查看以前相关的StackOverflow答案，并熟悉在Web应用程序中使用DeviceOrientation事件的一般实用注意事项 。

我在之前相关的StackOverflow答案中提供的简单解决scheme仅适用于实现absolute deviceorientation事件的浏览器（即deviceorientation alpha属性为罗盘的浏览器）。 这意味着目前提供的解决scheme仅适用于Android浏览器，而不适用于基于iOS的浏览器或任何其他不提供基于absolute的定向事件数据的浏览器。

为了在Android和iOS浏览器中可靠地获取当前的罗盘标题，您需要同时处理提供附加webkitCompassHeading属性的absolute和非absolute实现，并确保将任何当前的屏幕方向更改作为其中的一部分。 AFAIK目前唯一的这个库是Full Tilt JS （免责声明：我是这个库的作者）。

以下代码将为您提供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> 

这是一个演示 ，演示这种技术，以获得用户面临的指南针标题。 它应该适用于iOS和Android浏览器。

该演示中代码的实现如上所示，可以在Github的./scripts/compass.js:L268-L272上查看。

Answer 3

在Android版Chrome上，您可以使用'deviceorientationabsolute'事件侦听器：

 if ('ondeviceorientationabsolute' in window) { // Chrome 50+ specific window.addEventListener('deviceorientationabsolute', handleOrientation); } else if ('ondeviceorientation' in window) { window.addEventListener('deviceorientation', handleOrientation); } function handleOrientation(event) { var alpha; if (event.absolute) { alpha = event.alpha; } else if (event.hasOwnProperty('webkitCompassHeading')) { // get absolute orientation for Safari/iOS alpha = 360 - event.webkitCompassHeading; // conversion taken from a comment on Google Documentation, not tested } else { console.log('Could not retrieve absolute orientation'); } console.log('Absolute orientation: ' + alpha); } 

请参阅Google Web Developer文档中的这篇文章 。

在Chrome 63上进行testing。

Answer 4

我相信你可以使用位置对象的“标题”字段，从navigator.geolocation，请看这里：

https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation

我不知道别的办法。

希望它有帮助，答：