角谷歌地图显示

Question

我的地图只是部分加载地图控件，但不能造成实际的地图：

我的HTML

<div class="my-meets-map"> 
         <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options"> 
          <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> 
          </ui-gmap-marker> 
         </ui-gmap-google-map> 
        </div> 

在控制器：

$scope.map = { 
      center: { 
       latitude: 0, 
       longitude: 0 
      }, 
      zoom: 12 
     }; 
     $scope.options = { scrollwheel: true }; 
     $scope.marker = { 
      id: 1, 
      coords: { 
       latitude: 0, 
       longitude: 0 
      }, 
      show: false 
     }; 

在CSS：

.angular-google-map { 
       height: 100%; 
      } 
      .angular-google-map-container { 
       height: 100%; 
      } 

这上面的截图是移动的。 而在桌面或平板电脑上，它可以正常显示。如果我们在Chrome中调整移动屏幕的大小，那么也可以正确地绘制渲染。

谢谢。

Answer 1

只是我添加ng-if条件哪里有地图div。

在我的HTML：

<div class="col-xs-12 my-meets-map" data-ng-if="render"> 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options"> 
     <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> 
     </ui-gmap-marker> 
    </ui-gmap-google-map> 
</div> 

在我的控制器：

$scope.render = false; 
$timeout(function() { 
    $scope.render = true; 
},0); 

通过这样做，我们的HTML一些时间与所有值之后DOM渲染。