Angular google 地图以灰色显示

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

上面这张截图是手机版的。在台式机或平板电脑中，它显示 properly.And 如果我们在 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 会在一段时间后渲染所有值。

Angular google 地图以灰色显示

Angular google map display in grey color

angularjs

angular-google-maps