角度谷歌地图呈现两张地图答案

【问题标题】：angular google maps renders two maps角度谷歌地图呈现两张地图
【发布时间】：2016-08-03 14:26:44
【问题描述】：

我正在使用 ui-gmap-google-map 并且我正在尝试设置地图的边界以适合我拥有的标记。这通常在它们之间的距离很短时起作用。但是，当我在标记之间的距离更长的情况下执行此操作时，地图会呈现为如图所示，看它看起来像是呈现了两个地图。它看起来好像标记是重复的，并从“角落”地图的右侧重新开始。

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

我正在控制器中设置边界...

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>

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

我在网上找不到有关此特定问题的任何信息。任何帮助表示赞赏。

【问题讨论】：

标签： angularjs angular-google-maps

【解决方案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
                        }]};

【讨论】：