Angular Google Maps - 自动设置'center'和'zoom'以适合所有标记

I have a dynamically generated list of markers within my Google Map. I want the map's center to be the center of all the markers and zoomed out just enough so that all markers are in view.

我在Google地图中有一个动态生成的标记列表。我希望地图的中心成为所有标记的中心，并缩小到足以使所有标记都在视野中。

In terms of calculating the map center, perhaps this could be possible by iterating through all the latitudes and longitudes and finding the central point. However, I cannot figure out the best way to calculate what the zoom should be.

在计算地图中心方面，也许这可以通过迭代所有纬度和经度并找到中心点来实现。但是，我无法找出计算缩放应该是什么的最佳方法。

Is this possible to achieve?

这有可能实现吗？

My map is being used in the template like this:

我的地图正在模板中使用，如下所示：

<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

UPDATE

Attempted Angular implementation from advice from @Tiborg:

从@Tiborg的建议尝试Angular实现：

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

This produces the console error: TypeError: undefined is not a function (evaluating 'a.lat()')

这会产生控制台错误：TypeError：undefined不是函数（评估'a.lat（）'）

5 个解决方案

#1

Use the LatLngBounds class in Google Maps API, like this:

在Google Maps API中使用LatLngBounds类，如下所示：

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

It will nicely zoom and center the map to fit all your markers.

它可以很好地缩放和居中地图，以适应您的所有标记。

Of course, this is the pure javascript, not the angular version, so if you have problems implementing it in angular (or you don't have access to the map instance from where you get the markers), let me know.

当然，这是纯粹的javascript，而不是角度版本，所以如果你在角度实现它时遇到问题（或者你无法访问从中获取标记的地图实例），请告诉我。

#2

angular-google-maps has taken care of this feature. All you need to do is add fit="true" attribute in your markers directive (ui-gmap-markers). Example : <ui-gmap-markers models="map.markers" fit="true" icon="'icon'"> Please refer the document http://angular-ui.github.io/angular-google-maps/#!/api

angular-google-maps已经完成了这项功能。您需要做的就是在markers指令中添加fit =“true”属性（ui-gmap-markers）。示例：请参阅文档http://angular-ui.github.io/angular-google-maps/ ＃！/ API

#3

The answer has been posted for another problem: https://*.com/a/23690559/5095063 After that you have just to add this line:

答案已经发布了另一个问题：https：//*.com/a/23690559/5095063之后你只需要添加这一行：

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

#4

Thanks to all the replies, I got this code which is working perfectly for me:

感谢所有的回复，我得到了这个代码，它对我来说非常有用：

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

I hope it will help to someone.

我希望它会对某人有所帮助。

#5

Also use timeout to make sure it is digested properly

还要使用超时以确保它被正确消化

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

#1