angular google maps 渲染两张地图

Question

我正在使用 ui-gmap-google-map 并且我正在尝试设置地图的边界以适应我拥有的标记。这通常在它们之间的距离很短时有效。但是当我在标记之间使用更长的距离时，地图呈现如下图所示，看它看起来像是呈现了两张地图。它也看起来好像标记在 "corner" 地图的右侧重复并重新开始。

我知道标记和坐标是正确的。

我在我的控制器中像这样设置边界...

uiGmapIsReady.promise(2).then(function(instances) {
                instances.forEach(function(inst) {
                    var map = inst.map;

                    var bounds = new google.maps.LatLngBounds();
                    for (var i in $scope.markers) {
                        bounds.extend(new google.maps.LatLng($scope.markers[i].coords.latitude, $scope.markers[i].coords.longitude));
                    }

                    var fitBounds = new google.maps.LatLngBounds();
                    fitBounds.extend(new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));
                    fitBounds.extend(new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()));

                    map.fitBounds(fitBounds);

                });
            });

和 html...

<div class="map-container">
            <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" class="google-map">
                <ui-gmap-polyline path="map.path" stroke="map.stroke" fit="true"></ui-gmap-polyline>
                <ui-gmap-marker ng-repeat="m in markers track by $index" idKey="m.id" options="m.options" coords="m.coords" events="m.events"></ui-gmap-marker>
            </ui-gmap-google-map>
        </div>

如果我不设置边界，它呈现得很好，只是在一个看似随机的标记上放大。但我可以缩小，看起来不错，只有一张地图。

我在网上找不到关于这个具体问题的任何信息。任何帮助表示赞赏。

Answer 1

所以我最终弄明白了...

我在设置地图时将初始缩放级别设置为 5。然后运行一个 fitBounds() 函数，我相信它也会更新缩放。

我将初始缩放级别设置为 0，此问题消失了。

var map = {
                        //zoom: 5,
                        zoom: 0,
                        center: [{
                            latitude: $scope.journey.startCoordinate.lat,
                            longitude: $scope.journey.startCoordinate.lng
                        }, {
                            latitude: $scope.journey.endCoordinate.lat,
                            longitude: $scope.journey.endCoordinate.lng
                        }]};

angular google maps 渲染两张地图

angular google maps renders two maps

angularjs

angular-google-maps