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

Question

此代码的目的是在 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)

Return 来自 $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]

我很想知道这是什么原因，很想知道线索。如果有人认为有帮助，我可以提供更多信息。

干杯肖恩

Answer 1

您的错误似乎来自

return obj.dateRangeSlider("values");

而不是运行 obj.dateRangeSlider() 在手表里面，把它带到外面，return 变量和保存在里面的对象。更多详情可见here。希望这能给你一些好主意。

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

How to filter markers on a Gmaps object with angular and javascript

javascript

google-maps

angularjs