Angular Google 地图 - 边界内的可见标记

Question

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

但是我怎样才能得到"Visible Markers In Bounds"呢？（angular 方式）

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

目前，我在 "idle" 上的控制器中附加了一个事件，只要地图发生变化（缩放等）就会触发该事件。 foreach 循环遍历我的标记，但我不确定如何执行 "contains(marker.getPosition())"，因为这不是 google 映射的 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:

中访问

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

Answer 1

只要有变化就为 bounds_changed 添加一个事件，迭代你的标记：对于每个标记，如果这个条件（bounds.sw.lat< marker.lat < bounds.ne.lat 并且bounds.sw.lon < marker.lon < bounds.ne.lon ) 为真，则您的标记可见，因此您可以将其附加到可见标记列表中。

    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]
        );
      }
    }
  }
  };

Answer 2

受 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);

}

Answer 3

遗憾的是，我刚刚在 "accepted solution" 中发现了一个错误。例如，如果您将地图拖动到亚洲东北部，它将 return 一个负经度，这使得条件 return 为假。

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

    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;

Answer 4

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

Angular Google 地图 - 边界内的可见标记

Angular Google Maps - Visible Markers In Bounds

google-maps

angularjs

angular-google-maps