相关疑难解决方法(0)

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

我在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>
Run Code Online (Sandbox Code Playgroud)

UPDATE

从@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);
            }
        }
    };
});
Run Code Online (Sandbox Code Playgroud)

这会产生控制台错误: TypeError: undefined is not a function (evaluating 'a.lat()')

google-maps angularjs angular-ui

14
推荐指数
3
解决办法
2万
查看次数

标签 统计

angular-ui ×1

angularjs ×1

google-maps ×1