Question

当用户进入特定的地理围栏区域时，我需要创建一个向用户发出警报的应用程序。我尝试过cordova geofencing插件。但是当我进入该区域时它不起作用。我不知道是什么问题。这是我的代码。

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function () {
           // $log.log('Ionic ready');
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if ($window.cordova && $window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if ($window.StatusBar) {
                StatusBar.styleDefault();
            }
            if ($window.geofence) {
                $window.geofence.initialize();

                $window.geofence.onTransitionReceived = function (geofences) {
                  //  $log.log(geofences);
                    if (geofences) {
                        $rootScope.$apply(function () {
                            geofences.forEach(function (geo) {
                                geo.notification = geo.notification || {
                                    title: 'Geofence transition',
                                    text: 'Without notification'
                                };
                               // toaster.pop('info', geo.notification.title, geo.notification.text);
                            });
                        });
                    }
                };

                $window.geofence.onNotificationClicked = function (notificationData) {
                    $log.log(notificationData);
                    if (notificationData) {
                        $rootScope.$apply(function () {
                          //  toaster.pop('warning', 'Notification clicked', notificationData.notification.text);
                        });
                    }
                };
            }
           
        });

})


//Entering Zandig

window.geofence.addOrUpdate({
    id:             "e941166e-2409-4c97-8c80-14ba9e9d71c9",
    latitude:       12.958535143383823,
    longitude:      77.6381016522646,
    radius:         5,
    transitionType: 1
}).then(function () {
	document.getElementById("notification").innerHTML= "Reached Zandig";
    console.log('Geofence successfully added');
}, function (reason) {
    console.log('Adding geofence failed', reason);
});

//Leaving Trivandrum

window.geofence.addOrUpdate({
    id:             "1e473337-4747-4ac3-b921-ccaf572f38ce",
    latitude:       8.487695348115592,
    longitude:      76.95057034492493,
    radius:         3,
    transitionType: 2
   
}).then(function () {
	document.getElementById("notification").innerHTML= "Left Trivandrum";
    console.log('Geofence successfully added');
}, function (reason) {
    console.log('Adding geofence failed', reason);
});

//Entering 61

window.geofence.addOrUpdate({
    id:             "8f8119ce-b577-4f22-9880-57333fcff5de",
    latitude:       12.9593547,
    longitude:      77.63604520000001,
    radius:         5,
    transitionType: 1
    
}).then(function () {
	document.getElementById("notification").innerHTML= "Entered 61";
    console.log('Geofence successfully added');
}, function (reason) {
    console.log('Adding geofence failed', reason);
});

//Entering Santhi Sagar

window.geofence.addOrUpdate({
    id:             "d2c08c58-4f31-44e9-8a5c-8baaae3ebee3",
    latitude:       12.960690294723518,
    longitude:      77.63856634497643,
    radius:         15,
    transitionType: 1
}).then(function () {
	document.getElementById("notification").innerHTML= "Entered Santhi Sagar";
    console.log('Geofence successfully added');
}, function (reason) {
    console.log('Adding geofence failed', reason);
});

//Leaving Santhi Sagar

window.geofence.addOrUpdate({
    id:             "6923cf7d-470e-4921-9b54-4516c504cba5",
    latitude:       12.960690294723518,
    longitude:      77.63856634497643,
    radius:         15,
    transitionType: 2
}).then(function () {
	document.getElementById("notification").innerHTML= "Left Santhi Sagar";
    console.log('Geofence successfully added');
}, function (reason) {
    console.log('Adding geofence failed', reason);
});

//Getting watched from device

window.geofence.getWatched().then(function (geofencesJson) {
    var geofences = JSON.parse(geofencesJson);
});

//Listening for Geofencing transitions

window.geofence.onTransitionReceived = function (geofences) {
    geofences.forEach(function (geo) {
		alert('Geofence transition detected');
        console.log('Geofence transition detected', geo);
    });
};

//When click on notification

window.geofence.onNotificationClicked = function (notificationData) {
	Alert('Geofencing is Working');
    console.log('App opened from Geo Notification!', notificationData);
};

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
	<script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Geofencing</h1>
      </ion-header-bar>
      <ion-content>
	  <p id="notification"></p>
      </ion-content>
    </ion-pane>
  </body>
</html>

（在插件的Github页面中，有一个选项'地理位置的唯一ID'。我在UUID生成器在线页面添加了唯一ID。）

但没有显示警报。有人可以帮忙吗？

当我使用ionic serve运行时，在控制台中发现以下错误。 '未捕获的TypeError：无法读取未定义的属性'addOrUpdate'。

这是我的设备控制台错误。

0 466310错误未捕获TypeError：无法读取未定义的属性'addOrUpdate'，http：//192.168.43.148.8100/js/app.js，第28行

1 466870错误未找到Content-Security-Policy元标记。请在使用cordova-plugin-whitelist插件时添加一个。

2 466930错误未捕获TypeError：对象不是函数，http://192.168.43.148:8100/plugins/cordova/plugin-geofence/www.geofence.js，第119行

任何人都可以帮助我吗？

Answer 1

以下是来自同一插件作者的离子样本项目：https://github.com/cowbell/ionic-geofence，其中您可以看到如何在离子中使用它的完整指南。您的代码也应该可以正常运行，但是您几乎没有错误。如果您想在应用程序初始化时运行一些与插件相关的代码，请将它们放入.run()部分，您正在使用插件调用。另外，您无需使用document.addEventListener('deviceready') $ionicPlatform.ready，因此初始化插件。你的代码将是这样的

angular.module('starter', ['ionic','ngCordova'])
  .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
    //Use your plugin related calls in this area
   }) 
});

你得到了undefined的错误，因为你甚至在他们的对象可用于应用程序之前就进行了插件调用。再次，你想在初始化时运行的任何与插件相关的调用，都在{{1 }。

Answer 2

所以我看到你说你用离子服务器测试了它。你不能通过浏览器测试插件，你必须实际安装在设备上才能测试cordova插件。您还可以使用intel xdk通过仿真测试大多数插件。 https://software.intel.com/en-us/intel-xdk只需导入您的项目并模拟它，然后通过右侧的地图移动到您的地理位置。或者，您可以点击测试选项卡并将其推送到手机并使用iphone或Android设备上的英特尔应用预览应用进行测试。最后但并非最不重要的是，您可以使用调试选项卡将其直接推送到使用USB电缆的设备，这将允许您在设备上测试插件时拥有调试控制台。

Cordova Geofencing插件无法正常工作

2 个答案: