角谷歌地图 - 自动设置“中心”和“缩放”，以适应所有标记 [英] Angular Google Maps - automatically set 'center' and 'zoom' to fit in all markers

问题描述

我有我的谷歌地图中标记的一个动态生成的列表。我想在地图的中心是所有标记的​​中心，缩小刚好足以使所有的标记是在图

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.

在计算地图中心而言，这也许可以通过所有的纬度和经度迭代，并找到中心点是可能的。不过，我想不出来计算变焦应该是什么样的最佳方式。

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.

这是可能实现的？

我的地图是这样的正在使用的模板：

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

从未遂角的建议执行从@Tiborg：

Attempted Angular implementation from advice from @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);
            }
        }
    };
});

这产生控制台错误：类型错误：未定义不是一个函数（计算'a.lat（）'）

推荐答案

使用在谷歌地图API的类的LatLngBounds，像这样的：

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

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.

当然，这是纯JavaScript，没有角的版本，所以如果你有角度实现它（或者你没有从你在哪里得到的标志访问地图实例）的问题，让我知道。

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.

这篇关于角谷歌地图 - 自动设置“中心”和“缩放”，以适应所有标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！