angularjs – Angular Google Maps – 自动设置“中心”和“缩放

发布时间：2020-12-17 07:41:34 所属栏目：安全来源：网络整理

导读：我的Google Map中有一个动态生成的标记列表.我想让地图的中心成为所有标记的中心,并将其缩小到足够大,以便所有标记都可以看到. 在计算地图中心方面,也许这可以通过遍历所有的纬度和经度并找到中心点来实现.但是,我无法弄清楚放大应该是什么的最佳方法. 这可

我的Google Map中有一个动态生成的标记列表.我想让地图的中心成为所有标记的中心,并将其缩小到足够大,以便所有标记都可以看到.

在计算地图中心方面,也许这可以通过遍历所有的纬度和经度并找到中心点来实现.但是,我无法弄清楚放大应该是什么的最佳方法.

这可以实现吗？

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

<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的建议执行角度：

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不是一个函数(评估’a.lat()’)

在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

它将很好地缩放和中心地图,以适应所有的标记.

当然,这是纯粹的javascript,而不是角度版本,所以如果你有问题的实现它有角度(或者你没有访问地图实例从你得到的标记),让我知道.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!