谷歌角地图以灰色显示

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

简而言之，我在地图div处添加了ng-if条件。

在我的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会在一段时间后呈现所有价值。