角Googleマップは2つの地図をレンダリングする

Question

私はui-gmap-google-mapを使用しています。私は自分が持っているマーカーに合わせて地図の境界を設定しようとしています。 これは通常、それらの間の距離が短い場合に機能します。しかし、マーカー間の距離を長くすると、地図はここに描かれているようにレンダリングされます。地図が2つ表示されているように見えます。まるでマーカーが繰り返され、「コーナー」マップの右側に再び始まるかのように見えます。

私はマーカーや座標が正確であるという事実を知っています。私は私のコントローラで...

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> 

私は境界を設定しない場合、それは、細かいレンダリング一見無作為のマーカをズームインしただけです。しかし、私は縮小することができ、1つのマップでうまく見えます。

この特定の問題については、ネット上で何も見つかりません。どんな助けもありがたい。

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 
         }]};