javascript - 使用 Angular JS 和 Cordova 获取用户 60 秒的位置

Question

应用运行时是否可以每分钟获取用户的位置？据我了解，该位置只能在 index.html 文件中获取。理想情况下，我想在 controller.js 中执行此操作，这样我就可以使用 AJAX 调用将位置保存到我的数据库中。

我尝试使用setTimeout()每分钟运行一次。但是，我只能看到它被调用一次:

function onDeviceReady() {
    setTimeout(getLocation(), 60* 1000);
}

function getLocation() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

我正在使用cordova-plugin-geolocation插件!我尽量避免使用Google的插件。

1. 我可以在 onDeviceReady() 函数中每分钟获取用户的位置吗(仅当应用运行时，不需要后台刷新)？
2. 我可以获取用户在controller.js 文件中的位置吗？

Answer 1

您的代码不起作用，因为它是

1. 不受摘要周期的约束(因此 Angular 不会对其执行脏检查并更新 View )
2. 正在使用setTimeout ，它仅对一次性任务进行排队，而不是按一定时间间隔执行的任务。

这是一个可以在 Controller 中运行的简单调整:

function onDeviceReady() {
  $interval(function() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }, 60000)
}

不过，我认为这在 Controller 中是一个糟糕的解决方案。 Controller 不应访问 DOM(组件 Controller 除外)，是的，navigator是 DOM 的一部分。以下是使用最佳实践的两种替代方案 - 指令或组件。

<小时/>

Angular 1.4

class LocationCtrl {
  constructor() {
    this.position = null
  }
}

function locationContainerDirective($interval) {
  function link(scope, el, attrs, ctrl) {
    const promise = $interval(() => {
      navigator.geolocation.getCurrentPosition(function(position) {
        ctrl.onUpdatePosition({ position })
      })
    }, 60000)

    scope.$on('$destroy', () => $interval.cancel(promise))
  }

  return {
    scope: {
      onUpdatePosition: '&'
    },
    bindToController: true,
    restrict: 'E',
    require: 'location',
    controller: LocationCtrl,
    controllerAs: 'location',
    transclude: true,
    template: '<div ng-transclude></div>',
    link
  }
}

<小时/>

Angular 1.5(或带垫片的 1.3)

我建议创建一个通过回调提供位置的容器组件，如下所示:

angular.component('position', {
  outputs: {
    onUpdatePosition: '&'
  }
  controller: class PositionCtrl {
    constructor($interval) {
      this.$interval = $interval
    }

    $onInit() {
      this.$interval(() => {
        navigator.geolocation.getCurrentPosition((position) => {
          this.onUpdatePosition({ position })
        })
      })
    }
  }
})

然后可以像这样在组件中使用它:

  <position on-update-position='$ctrl.onUpdatePosition(position)'></position>
  <google-map focus='$ctrl.position'></google-map>

哪里<google-map>是一些使用导航器位置的任意组件。