角谷歌地圖渲染兩個地圖

我正在使用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>

如果我沒有設定的界限，它呈現細膩，只是放大了看似隨機的標記。但我可以縮小，看起來很好，只需一張地圖。

我在網上找不到關於這個特定問題的任何信息。任何幫助讚賞。

來源

2016-08-03 Stuart

所以我理解了它最終...

我已經建立地圖時的初始縮放級別設置爲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 
         }]};

來源

2016-08-09 08:54:22 Stuart

角谷歌地圖渲染兩個地圖

回答

相關問題