离子地理位置更改标记位置答案

【问题标题】：ionic geolocation change marker place离子地理位置更改标记位置
【发布时间】：2016-03-17 14:50:24
【问题描述】：

我使用 Ionic 地理定位来跟踪客户位置，但标记并没有改变她的位置，请任何人帮助我，这是我的控制器代码：

控制器

app.controller('mapCtrl', function($scope, $ionicPlatform, $state, $http, $cordovaGeolocation, $interval, $ionicPopup, $ionicLoading) {
    $scope.positions = [{
        lat: 43.07493,
        lng: -89.381388
    }];
    $scope.$on('mapInitialized', function(event, map) {
        $scope.map = map;
        $scope.positions = [];
        $ionicLoading.show({
            template: 'Loading...'
        });
        $scope.map = map;
        var getLocation = function() {
            marker.setVisible(false);
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    'icon': 'img/marker2.png'
                });
                marker.setVisible(true);
                marker.setIcon('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_gray.png');
                $scope.positions.push({
                    lat: pos.k,
                    lng: pos.B
                });
                console.log(pos);
                $scope.map.setCenter(pos);
                $ionicLoading.hide();
            });
        };
        $interval(getLocation, 5000);
    });
});

【问题讨论】：

标签： angularjs google-maps geolocation ionic marker

【解决方案1】：

尝试声明没有位置的标记，然后使用cordova提供的navigator.geolocation.watchPosition()函数更新你的标记变量，而不是使用$interval，如果用户不移动，它可能会返回相同的位置。

此函数在检测到变化时获取新的位置数据集。在此处查看完整用法Cordova-Plugin-Geolocation

例子：

app.controller('mapCtrl', function($scope, $ionicPlatform, $state, $http, $cordovaGeolocation, $ionicPopup, $ionicLoading) {
  $scope.positions = [{
    lat: 43.07493,
    lng: -89.381388
  }];
  $scope.$on('mapInitialized', function(event, map) {
    $scope.map = map;
    $scope.positions = [];
    $ionicLoading.show({
      template: 'Loading...'
    });
    $scope.map = map;
    var marker = new google.maps.Marker({
      animation: google.maps.Animation.DROP,
      icon: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_gray.png',
      map: map,
      visible: false
    });
    navigator.geolocation.watchPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      marker.setPosition(pos);
      $scope.positions.push({
        lat: pos.k,
        lng: pos.B
      }); 
      console.log(pos);
      map.setCenter(pos);
      if(!marker.getVisible()) {
        marker.setVisible(true);
        $ionicLoading.hide();
      }
    });
  });

  ...

});

【讨论】：