如何在音位间隙中显示纬度、经度、航向

发布于 2024-12-27 04:19:51 字数 2622 浏览 0 评论 0原文

我想使用phonegap在同一应用程序中显示纬度，经度，航向。我尝试了phonegap相同的程序。如果我得到纬度，经度，我无法得到航向为空。有什么办法吗？

<!DOCTYPE html>
<html>
  <head>
    <title>Compass Example</title>

    <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" href="css/compass.css"/>

    <script type="text/javascript" charset="utf-8">
       // The watch id references the current `watchHeading`
    var watchID = null;


    // Wait for PhoneGap to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    //
    function onDeviceReady() {
        var options = { frequency: 500 };
        watchID = navigator.compass.watchHeading(onSuccess, onError, options);
        //watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);


    }

/*
    // Start watching the compass
    //
    function startWatch() {
         // Update compass every 3 seconds
        var options = { frequency: 500 };

        watchID = navigator.compass.watchHeading(onSuccess, onError, options);
    }

    // Stop watching the compass
    //
    function stopWatch() {
        if (watchID) {
            navigator.compass.clearWatch(watchID);
            watchID = null;
        }
    }
*/
    // onSuccess: Get the current heading
    //
    function onSuccess(position) {
        var element = document.getElementById('ang');
        var deg_heading = document.getElementById('heading');
        //var lat = position.coords.latitude; 
        //var lng = position.coords.longitude;
        var deg = position.magneticHeading;
        var actual_deg = 360;
        //var deg = '180';
        //alert ("lat/lng: "+lat+","+lng);
        deg_heading.innerHTML = 'Heading: ' + (actual_deg - deg)  + '&#176';// + " lat:"+lat+" long:"+lng;

        element.style.webkitTransform = "rotate(-"+ deg +"deg)";


    }

    // onError: Failed to get the heading
    //
    function onError(compassError) {
        alert('Compass error: ' + compassError.code);
    }

    </script>
  </head>
   <body>
   <!-- <button onclick="startWatch();">Start Watching</button>
    <button onclick="stopWatch();">Stop Watching</button> -->
    <div id="compass" class="comapss">
        <div class="compass_direction"><img id="ang" src="img/direction.png"/></div>
    </div>
    <div id="heading"></div>    
  </body> 
</html>

原文

I want to display the latitude,longtitude,Heading in same application using phonegap.i tried the phonegap same program.if i get latitude,longtude,i couldnt get heading is null.is there any way?

<!DOCTYPE html>
<html>
  <head>
    <title>Compass Example</title>

    <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" href="css/compass.css"/>

    <script type="text/javascript" charset="utf-8">
       // The watch id references the current `watchHeading`
    var watchID = null;


    // Wait for PhoneGap to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    //
    function onDeviceReady() {
        var options = { frequency: 500 };
        watchID = navigator.compass.watchHeading(onSuccess, onError, options);
        //watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);


    }

/*
    // Start watching the compass
    //
    function startWatch() {
         // Update compass every 3 seconds
        var options = { frequency: 500 };

        watchID = navigator.compass.watchHeading(onSuccess, onError, options);
    }

    // Stop watching the compass
    //
    function stopWatch() {
        if (watchID) {
            navigator.compass.clearWatch(watchID);
            watchID = null;
        }
    }
*/
    // onSuccess: Get the current heading
    //
    function onSuccess(position) {
        var element = document.getElementById('ang');
        var deg_heading = document.getElementById('heading');
        //var lat = position.coords.latitude; 
        //var lng = position.coords.longitude;
        var deg = position.magneticHeading;
        var actual_deg = 360;
        //var deg = '180';
        //alert ("lat/lng: "+lat+","+lng);
        deg_heading.innerHTML = 'Heading: ' + (actual_deg - deg)  + '°';// + " lat:"+lat+" long:"+lng;

        element.style.webkitTransform = "rotate(-"+ deg +"deg)";


    }

    // onError: Failed to get the heading
    //
    function onError(compassError) {
        alert('Compass error: ' + compassError.code);
    }

    </script>
  </head>
   <body>
   <!-- <button onclick="startWatch();">Start Watching</button>
    <button onclick="stopWatch();">Stop Watching</button> -->
    <div id="compass" class="comapss">
        <div class="compass_direction"><img id="ang" src="img/direction.png"/></div>
    </div>
    <div id="heading"></div>    
  </body> 
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

池予 2025-01-03 04:19:51

无论出于何种原因，我必须在某些项目中监视 navigator.compass 的初始化。有时，直到 deviceReady 触发后不久它才会存在。我通常使用这样的东西：

var intervalId = setInterval(function() {
   if( navigator.compass ) {
      clearInterval(intervalId);
      intervalId = navigator.compass.watchHeading(onSuccess, onError, options);
   }
}, 250);

For whatever reason, I've had to monitor navigator.compass for initialization in some of my projects. Occasionally it won't exist until a bit after deviceReady fires. I usually use something like this:

var intervalId = setInterval(function() {
   if( navigator.compass ) {
      clearInterval(intervalId);
      intervalId = navigator.compass.watchHeading(onSuccess, onError, options);
   }
}, 250);

回复收藏 0 原文

花海 2025-01-03 04:19:51

function locationFinder() {
    if (navigator.geolocation) {
        function success(pos) {
            current_lng = pos.coords.longitude;
            current_lat = pos.coords.latitude;
            console.log("longitude get" + current_lng);
            console.log("latitude get" + current_lat);
        }
        function fail(error) {
            console.log("error 2");
        }
        // Find the users current position. Cache the location for 5 minutes,
        // timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {
            maximumAge : 500000,
            enableHighAccuracy : true,
            timeout : 6000
        });
    } else {
        window.plugins.toast.showLongBottom("Please check GPS Setting",
                function(a) {
                    console.log('toast success: ' + a)
                }, function(b) {
                    console.log('toast error: ' + b)
                });
    }
}

function locationFinder() {
    if (navigator.geolocation) {
        function success(pos) {
            current_lng = pos.coords.longitude;
            current_lat = pos.coords.latitude;
            console.log("longitude get" + current_lng);
            console.log("latitude get" + current_lat);
        }
        function fail(error) {
            console.log("error 2");
        }
        // Find the users current position. Cache the location for 5 minutes,
        // timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {
            maximumAge : 500000,
            enableHighAccuracy : true,
            timeout : 6000
        });
    } else {
        window.plugins.toast.showLongBottom("Please check GPS Setting",
                function(a) {
                    console.log('toast success: ' + a)
                }, function(b) {
                    console.log('toast error: ' + b)
                });
    }
}

回复收藏 0 原文

夏九 2025-01-03 04:19:51

我把这个留在这里是因为我浪费了一整天的时间来解决同样的问题。
您正在寻找错误的 API 来获取手机的方向。地理位置中的航向属性不是指南针方向，而是根据手机的移动计算出的方向。所以如果你站着不动，标题就是空的。一旦您移动，航向就会指向您的移动方向。请参阅此文档： https://developer.mozilla.org/ en-US/docs/Web/API/GeolocationCooperatives/heading

您正在寻找的是“deviceorientation”事件。对于 iOS/Safari，您必须首先手动请求该功能。
（这是打字稿代码）

const isIOS = !(
    navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
    navigator.userAgent.match(/AppleWebKit/)
);
if (isIOS) {
    (DeviceOrientationEvent as any).requestPermission()
        .then((response: any) => {
            if (response === "granted") {
                window.addEventListener("deviceorientation", this.receivedNewHeading, true);
            } else {
                alert("has to be allowed!");
            }
        })
        .catch(() => alert("not supported"));
} else {
    window.addEventListener("deviceorientationabsolute", this.receivedNewHeading, true);
}

I leave this here because I wasted a full day with the same problem.
You are looking into the wrong API for getting the Orientation of the phone. The heading attribute in the geolocation is not the compas orientation but a direction calculated based on the movement of the phone. So if you are standing still heading is null. As soon you as you are moving the heading points into the direction of your movement. See this docu: https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates/heading

What you are looking for is the "deviceorientation" event. For iOS/Safari you have to manually request the feature first.
(This is Typescript code)

const isIOS = !(
    navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
    navigator.userAgent.match(/AppleWebKit/)
);
if (isIOS) {
    (DeviceOrientationEvent as any).requestPermission()
        .then((response: any) => {
            if (response === "granted") {
                window.addEventListener("deviceorientation", this.receivedNewHeading, true);
            } else {
                alert("has to be allowed!");
            }
        })
        .catch(() => alert("not supported"));
} else {
    window.addEventListener("deviceorientationabsolute", this.receivedNewHeading, true);
}

回复收藏 0 原文

~没有更多了~