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条件，其中有map 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会在一段时间后呈现所有值。

Angular Google地图以灰色显示

1 个答案: