Угловые карты Google - видимые маркеры в границах

Question

Я успешно реализовал карты углового google в локальном проекте со списком маркеров, который помещается на мою карту.

Но как я могу получить «видимые маркеры в границах»? (Угловая сторону)

• JQuery Пример: http://jsfiddle.net/glafarge/mbuLw/

На данный момент я прикрепленный событие в моем контроллере на «холостой ход», который получает срабатывает, когда карта изменение (увеличение и др). Пробел проходит через мои маркеры, но я просто не уверен, как выполнить «contains (marker.getPosition())», потому что это не функция в угловой версии карт google.

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

Bounds доступен в $ 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

К сожалению, я только что обнаружил ошибку в «общепринятом решения». Если вы, например, перетащите свою карту к северо-востоку от Азии, она вернет отрицательную долготу, которая заставит условие вернуть false.

На данный момент я решил это с помощью встроенных функций Google Maps, таких как внизу. Тем не менее, хотя, я не думаю, что это лучший подход, так что я до сих пор ищет лучший подход:

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

GetBounds используемой Карту объект() метод, то использование содержит() метод для обнаружения ли широчайшие LNG находится в пределах