Question

我已经在我的本地项目中成功实施了角度谷歌地图，并在地图上放置了标记列表。

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

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

此刻我在控制器中附加了一个“空闲”事件，当地图发生变化时会触发该事件（zoom et）。 foreach循环遍历我的标记，但我不知道如何执行“contains（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();
});

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

}

Answer 2

每当有变化时为bounds_changed添加一个事件，迭代你的标记：对于每个标记，如果这个条件（bounds.sw.lat＆lt; marker.lat＆lt; bounds.ne.lat和bounds.sw.lon＆lt; marker.lon＆lt; bounds.ne.lon）为true，那么您的标记是可见的，因此您可以将其附加到可见标记列表中。

    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 3

可悲的是，我刚刚在＆＃34;接受的解决方案中发现了一个错误＆＃34;。例如，如果您将地图拖到亚洲东北部，它将返回负经度，这使得条件返回false。

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

    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（）方法来检测lat lng是否在绑定范围内

Angular Google Maps - 边界中的可见标记

4 个答案: