angularjs - Angular Google map - 边界内的可见标记

Question

我已经在我的本地项目上成功实现了 angular-google-maps，并在我的 map 上添加了标记列表。

但是我怎样才能获得“边界内的可见标记”？ ( Angular 方式)

• jQuery 示例:http://jsfiddle.net/glafarge/mbuLw/

目前，我在 Controller 中附加了一个“空闲”事件，每本地图发生变化(缩放等)时就会触发该事件。 foreach 循环遍历我的标记，但我只是不确定如何执行“contains(marker.getPosition())”，因为这不是 google map Angular 版本中的函数。

events: {
    idle: function () {
        console.log("change triggered");
        angular.forEach($scope.markers, function(marker, key) {
            console.log("set visible markers here");
        });
    }
}

边界可以在 $scope.map.bounds 中访问，如下所示:

$scope.map.bounds = {
    northeast: {
        latitude: 51.219053,
        longitude: 4.404418
    },
    southwest: {
        latitude: -51.219053,
        longitude: -4.404418
    }
}

可以在 $scope.mapRef 中访问 map 对象:

uiGmapIsReady.promise().then(function (map_instances) {
    $scope.mapRef = $scope.map.control.getGMap();
});

Answer 1

受到 MayK 答案的启发，我用以下方法解决了这个问题:

idle: function (map) {

    $timeout(function() {

        var visibleMarkers = [];

        angular.forEach($scope.markers, function(marker, key) {

            if ($scope.map.bounds.southwest.latitude < marker.coords.latitude 
                && marker.coords.latitude < $scope.map.bounds.northeast.latitude 
                && $scope.map.bounds.southwest.longitude < marker.coords.longitude 
                && marker.coords.longitude < $scope.map.bounds.northeast.longitude) {

                visibleMarkers.push(marker);
            }
        });

        $scope.visibleMarkers = visibleMarkers;

    }, 0);

}