Angular Карты Google - автоматически устанавливают "центр" и "масштабирование" для соответствия всем маркерам

У меня есть динамически созданный список маркеров в моей карте Google. Я хочу, чтобы центр карты был центром всех маркеров и уменьшался настолько, чтобы отображались все маркеры.

С точки зрения вычисления центра карты, возможно, это было бы возможно путем повторения всех широт и долгот и нахождения центральной точки. Тем не менее, я не могу найти лучший способ рассчитать, что должно быть масштабирование.

Можно ли это достичь?

Моя карта используется в шаблоне следующим образом:

<ui-gmap-google-map events="map.events" center="map.center" zoom="map.zoom" draggable="true" options="options">
    <ui-gmap-marker ng-repeat="home in filteredHomes = (resCtrl.filteredHomes | orderBy : $storage.params.orderby : $storage.params.reverseOrder)" coords="{latitude: home.location.latitude, longitude: home.location.longitude}" idkey="home.homeId">
    </ui-gmap-marker>
</ui-gmap-google-map>

UPDATE

Попытка Angular реализации из рекомендации @Tiborg:

uiGmapGoogleMapApi.then(function(maps) {
    $scope.map = {
        center: $scope.$storage.params.views.map.location,
        zoom: $scope.$storage.params.views.map.zoom,
        events: {
            click: function() {
                var bounds = new google.maps.LatLngBounds();
                for (var i in $scope.filteredHomes) {
                    bounds.extend($scope.filteredHomes[i].location);
                }
                $scope.map.fitBounds(bounds);
            }
        }
    };
});

Это приводит к ошибке консоли: TypeError: undefined is not a function (evaluating 'a.lat()')

Ответы

Ответ 1

Используйте класс LatLngBounds в API Карт Google, например:

var bounds = new google.maps.LatLngBounds();
for (var i in markers) // your marker list here
    bounds.extend(markers[i].position) // your marker position, must be a LatLng instance

map.fitBounds(bounds); // map should be your map class

Он хорошо масштабирует и центрирует карту, чтобы соответствовать всем вашим маркерам.

Конечно, это чистая версия javascript, а не angular, поэтому, если у вас есть проблемы с ее реализацией в angular (или у вас нет доступа к экземпляру карты, откуда вы получаете маркеры) дайте мне знать.

Ответ 2

angular -google-карты позаботились об этой функции. Все, что вам нужно сделать, это добавить атрибут fit = "true" в директиву маркеров (ui-gmap-markers). Пример: <ui-gmap-markers models="map.markers" fit="true" icon="'icon'"> Пожалуйста, обратитесь к документу http://angular-ui.github.io/angular-google-maps/#!/api

Ответ 3

Ответ был опубликован для другой проблемы: fooobar.com/questions/414402/... После этого вы должны просто добавить эту строку:

$scope.map.control.getGMap().fitBounds(bounds);

Ответ 4

Благодаря всем ответам, я получил этот код, который отлично работает для меня:

var bounds = new google.maps.LatLngBounds();
for (var i = 0, length = $scope.map.markers.length; i < length; i++) {
  var marker = $scope.map.markers[i];
  bounds.extend(new google.maps.LatLng(marker.latitude, marker.longitude));
}
$scope.map.control.getGMap().fitBounds(bounds);

Я надеюсь, что это поможет кому-то.

Ответ 5

Также используйте таймаут, чтобы убедиться, что он правильно переваривается

 uiGmapIsReady.promise()
          .then(function (map_instances) {
            var bounds = new google.maps.LatLngBounds();
            for (var i in $scope.map.markers) {
              var marker = $scope.map.markers[i];
  bounds.extend(new google.maps.LatLng(marker.latitude, marker.longitude));
            }

            $timeout(function() {
              map_instances[0].map.fitBounds(bounds);
            }, 100);
          });