PhoneGap Compass: все работает, но навигатор.compass
В моем проекте работает все, кроме функции компаса.
Я попытался и успешно построить пример проекта компаса. Но в моем проекте мой код компаса не работает, и пример проекта компаса при компиляции вместе с моим проектом (как другой страницей) также не работает.
Сообщение console.log (navigator.compass) не определено... Например, если нет компаса или компас не определен для навигатора, почему это может быть?
Я имел дело с этим в течение нескольких дней, и я понятия не имею, почему это происходит. Config.xml должен быть в порядке, но в моем проекте должно быть что-то, что блокирует компас? Pos Это возможно?
Вот файл config.xml:
<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.bla.bla"
version = "1.0.0"
versionCode = "10">
<name>blabla</name>
<description>
blbla
<author href="www.webpage.es" email="imail@gmail.com">
Props
</author>
<gap:platform name="android" />
<gap:platform name="ios" />
<gap:platform name="winphone"/>
<!--
If you do not want any permissions to be added to your app, add the
following tag to your config.xml; you will still have the INTERNET
permission on your app, which PhoneGap requires.
-->
<preference name="permissions" value="none"/>
<preference name="phonegap-version" value="3.5.0" />
<!-- Plugins -->
<!-- Core plugins -->
<gap:plugin name="org.apache.cordova.device" version="0.2.12" />
<gap:plugin name="org.apache.cordova.device-orientation" version="0.3.9" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.network-information" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
<!--
<gap:plugin name="org.apache.cordova.battery-status" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.media-capture" />
<gap:plugin name="org.apache.cordova.contacts"
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
-->
<!-- Third party plugins -->
<!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
<!--
<gap:plugin name="com.phonegap.plugins.barcodescanner" />
-->
<!-- Define app icon for each platform. -->
<icon src="icon.png" />
<icon src="icon/android/android_36.png" gap:platform="android" gap:qualifier="ldpi" />
<icon src="icon/android/android_48.png" gap:platform="android" gap:qualifier="mdpi" />
<icon src="icon/android/android_72.png" gap:platform="android" gap:qualifier="hdpi" />
<icon src="icon/android/android_96.png" gap:platform="android" gap:qualifier="xhdpi" />
<icon src="icon/bb/bb_80.png" gap:platform="blackberry" />
<icon src="icon/bb/bb_80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="icon/ios/ios_57.png" gap:platform="ios" width="57" height="57" />
<icon src="icon/ios/ios_72.png" gap:platform="ios" width="72" height="72" />
<icon src="icon/ios/ios_114.png" gap:platform="ios" width="114" height="114" />
<icon src="icon/ios/ios_144.png" gap:platform="ios" width="144" height="144" />
<icon src="icon/webos/icon_64.png" gap:platform="webos" />
<icon src="icon/windows-phone/icon_48.png" gap:platform="winphone" />
<icon src="icon/windows-phone/icon_173.png" gap:platform="winphone" gap:role="background" />
<!-- Define app splash screen for each platform. -->
<gap:splash src="splash.png" />
<gap:splash src="screen/android/screen_ldpi_portrait.png" gap:platform="android" gap:qualifier="port-ldpi" />
<gap:splash src="screen/android/screen_mdpi_portrait.png" gap:platform="android" gap:qualifier="port-mdpi" />
<gap:splash src="screen/android/screen_hdpi_portrait.png" gap:platform="android" gap:qualifier="port-hdpi" />
<gap:splash src="screen/android/screen_xhdpi_portrait.png" gap:platform="android" gap:qualifier="port-xhdpi" />
<gap:splash src="screen/bb/bb2_00.png" gap:platform="blackberry" />
<gap:splash src="screen/ios/screen_iphone_portrait.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="screen/ios/screen_iphone_portrait_2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="screen/ios/screen_iphone_portrait_3x.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="screen/ios/screen_ipad_portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="screen/ios/screen_ipad_landscape.png" gap:platform="ios" width="1024" height="768" />
<gap:splash src="screen/windows-phone/screen_portrait.jpg" gap:platform="winphone" />
</widget>И здесь у меня есть мой JavaScript (который должен работать, и все работает, кроме navigator.compass, который возвращает неопределенный:
$(function() {
var currLat; //Current latitude
var currLon; //Current longitude
var targetlat; //Target latitude
var targetlon; //Target longitude
var dist; //distance to the monument
var currentPos; //current position
var targetPos; //target position
var currHeading; //current heading
var targetBearing; //target bearing
inicio();
function inicio()
{
watchPos();
watchCompass();
}
function watchPos() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(posSuccess, posError,
{enableHighAccuracy: true,
timeout: 1000,
maxiumumAge: 0});
}
}
function posSuccess(position) {
targetlat = $('#latMonumento').data('lat');
targetlon = $('#lonMonumento').data('lon');
currLat = position.coords.latitude;
currLon = position.coords.longitude;
dist = calculateDist(currLat, currLon, targetlat, targetlon);
pushHtmlData();
currentPos = new LatLon(currLat, currLon); //Using LatLon.js
updatePos(targetlat, targetlon);
}
function posError(err) {
currLat = 36.7467849;
currLon = -5.167447999999999;
targetlat = $('#latMonumento').data('lat');
targetlon = $('#lonMonumento').data('lon');
dist = calculateDist(currLat, currLon, targetlat, targetlon);
alert("Error "+err)
pushHtmlData2();
}
function watchCompass() {//Check compass
if(navigator.compass) {//Busca el compass, y si lo detecta lanza las correspondientes funciones
navigator.compass.watchHeading(successCompass, failCompass, {frequency: 1000});}
alert("this is the compass " + navigator.compass)
}
function successCompass(heading) {
alert("Compass ok. Heading: " + heading);
currheading = heading.trueHeading >= 0 ? Math.round(heading.trueHeading) : Math.round(heading.magneticHeading);
updateDiff();
}
function failCompass(error) {
alert("Compass fail. Error: " + error);
}
function updatePos(lat,lon) {
alert("targetPos");
targetPos = new LatLon(lat, lon);
targetBearing = Math.round(currentPos.bearingTo(targetPos));
updateDiff();
}
function updateDiff() {
var diff = targetBearing - currHeading;
$('#Test').text("Grados hacia el monumento: "+diff+" grados.");
$arrow.css("-webkit-transform", "rotate("+diff+"deg)");
}
function calculateDist(latAct, lonAct, latDest, lonDest) {//Calculate distance to the monument
var R = 6371; // km
var dLat = (latDest - latAct).toRad();
var dLon = (lonDest - lonAct).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(latAct.toRad()) * Math.cos(latDest.toRad()) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
d *= 1000;
d = Math.round(d);
return d;
}
function pushHtmlData2() {
$('#Dist').text("Distancia del monumento al centro de Ronda: "+dist+" metros.");
$('#Advice').text("Activa los servicios de ubicación para conocer tu distancia al monumento.");
}
function pushHtmlData(){
$('#Dist').text("Distancia: "+dist+" metros.");
}
//Helpers:
Number.prototype.toDeg = function() { //Radians to degrees
return this * 180 / Math.PI;
};
Number.prototype.toRad = function() {//Convert to radians
return this * Math.PI / 180;
};
});