首页 文章

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

提问于
浏览 次
14

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

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

这有可能实现吗？

我的 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的建议尝试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);
            }
        }
    };
});

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

angularjs google-maps angular-ui

5 回答

  • 6

    在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

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

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

    回复于
  • 17

    angular-google-maps已经完成了这项功能 . 您需要做的就是在markers指令（ui-gmap-markers）中添加fit = "true"属性 . 示例： <ui-gmap-markers models="map.markers" fit="true" icon="'icon'"> 请参阅文档http://angular-ui.github.io/angular-google-maps/#!/api

    回复于
  • 0

    答案已针对另一个问题发布：https://stackoverflow.com/a/23690559/5095063之后您只需要添加以下行：

    $scope.map.control.getGMap().fitBounds(bounds);
    回复于
  • 17

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

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

    我希望它对某人有所帮助 .

    回复于
  • 4

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

    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);
          });
    回复于

相关问题