角谷歌地图渲染两个地图

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

角谷歌地图渲染两个地图

回答

相关问题