Angular Google Maps - 边界内的可见标记答案

【问题标题】：Angular Google Maps - Visible Markers In BoundsAngular Google Maps - 边界内的可见标记
【发布时间】：2015-11-18 11:47:14
【问题描述】：

我已经在我的本地项目中成功实现了 angular-google-maps，并在我的地图上放置了标记列表。

但我怎样才能获得“可见标记在边界内”？（角度方式）

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

目前，我在控制器内的“空闲”上附加了一个事件，该事件会在地图更改时触发（缩放等）。 foreach 循环通过我的标记，但我只是不确定如何执行“包含（marker.getPosition（））”，因为这不是谷歌地图角度版本中的功能。

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 中访问：

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

【问题讨论】：

嘿，你找到解决方案了吗？
不幸的是还没有......我会尽可能地悬赏这个问题:)
我发布了一个答案，但如果你确实解决了这个问题，我很想看看你是如何做到的：)

标签： angularjs google-maps angular-google-maps

【解决方案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);

}

【讨论】：

【解决方案2】：

只要有变化，就为 bounds_changed 添加一个事件，迭代你的标记：对于每个标记，如果这个条件（bounds.sw.lat

    vm.map.events = {
  bounds_changed: function(map) {
    vm.visibleMarkers=[];
    for (var i = 0; i < vm.beaconMarkers.length; i++) {
      if (vm.map.bounds.southwest.latitude < vm.beaconMarkers[i].latitude && vm.beaconMarkers[i].latitude < vm.map.bounds.northeast.latitude && vm.map.bounds.southwest.longitude < vm.beaconMarkers[i].longitude && vm.beaconMarkers[i].longitude< vm.map.bounds.northeast.longitude) {
        vm.visibleMarkers.push(
          vm.beaconMarkers[i]
        );
      }
    }
  }
  };

【讨论】：

谢谢！您的评论给了我正在寻找的 latLng 条件。我用上面的答案解决了这个问题，但功劳归于你 =)

【解决方案3】：

遗憾的是，我刚刚在“已接受的解决方案”中发现了一个错误。例如，如果您将地图拖到亚洲东北部，它将返回负经度，这会使条件返回错误。

现在我通过使用谷歌地图内置功能解决了这个问题，如下所示。不过，我认为这不是最好的方法，所以我仍在寻找更好的方法：

    var visibleMarkers = [];
    var bounds = $scope.mapRef.getBounds();

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

        var gMarker = new google.maps.Marker({
            position: {
                lat: marker.coords.latitude,
                lng: marker.coords.longitude
            }
        });
        if(bounds.contains(gMarker.getPosition())===true) {
            visibleMarkers.push(marker);
        }

    });

    $scope.visibleMarkers = visibleMarkers;

【讨论】：

【解决方案4】：

使用 Map Object 的 getBounds() 方法，然后使用 contains() 方法检测 lat lng 是否在边界内

【讨论】：