如何使用angular和javascript过滤Gmaps对象上的标记

时间:2015-01-29 07:14:12

标签: javascript angularjs google-maps

此代码的目的是在gmap上显示标记,但根据日期对其进行过滤。因此,只会显示在所选时间内创建的标记。

我正在观看来自名为obj.dateRangeSlider("values")的外部js脚本的值。

如下所示;

//this will watch the value coming from the time slider and update $scope.filteredMarks accordingly. This could also be expanded to include the search bar.
$scope.$watch(function () {
    //function returning the value to watch, aka dates selected
    return obj.dateRangeSlider("values");
}, function (newValue, oldValue) {
    //function to do when the value changes
    $scope.filteredMarks = $filter("filter")($scope.marks, function(value, index){
        //filter function to recreate the $scope.filteredMarks with the reduced data
        //this is called for each element of $scope.marks
        if(value.date >= newValue.min && value.date <= newValue.max){
            return true;
        }
        return false;
    });
});

然后,它会显示在网页上,如下所示;

<ui-gmap-google-map center='map.center' zoom='map.zoom' ng-init="lat = 'observation_latitude'">

    <ui-gmap-markers models="filteredMarks" coords="'self'" icon="'icon'" fit="true">
    </ui-gmap-markers>

</ui-gmap-google-map>

然而我多次出现此错误;

Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.20/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…return%20m%3Da%7D%3B%20newVal%3A%20%5B%5D%3B%20oldVal%3A%20%5B%5D%22%5D%5D
    at Error (native)
    at http://localhost:56499/Scripts/Angular/angular.min.js:6:450
    at k.$digest (http://localhost:56499/Scripts/Angular/angular.min.js:110:38)
    at k.$apply (http://localhost:56499/Scripts/Angular/angular.min.js:112:173)
    at h (http://localhost:56499/Scripts/Angular/angular.min.js:72:454)
    at w (http://localhost:56499/Scripts/Angular/angular.min.js:77:347)
    at XMLHttpRequest.z.onreadystatechange (http://localhost:56499/Scripts/Angular/angular.min.js:78:420)

$scope.marks返回:

>     [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
>     
>     0: Object   
>     date: "2014-11-30T23:21:44.823Z"  
>     id: 11  
>     latitude: -27.46009230397052
>     longitude: 153.0309266845481  
>     __proto__:  Object  
>     Object1:  
>     Object2:  
>     Object3:  
>     __proto__: Array[0]

我对这个原因很失落,并且想要一个线索。如果有人认为有帮助,我可以提供更多信息。

干杯肖恩

1 个答案:

答案 0 :(得分:0)

您的错误似乎来自

return obj.dateRangeSlider("values");

不是在监视器内运行obj.dateRangeSlider(),而是将其移到外面,并返回保存在其中的对象的变量。可以看到更多细节here。 希望这给了你一些好主意。