角度のGoogleマップ表示

Question

マイマップは部分的にしかマップコントロールをロードしますが、実際のマップのレンダリングされていません。では

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

：

コントローラーで

私の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> 

をCSS：

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

上記のスクリーンショットは、モバイル用です。 デスクトップやタブレットでは正しく表示されます。また、クロームでモバイル画面のサイズを変更すると、レンダリングも適切に行われます。

ありがとうございました。

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は、すべての値でいくつかの時間後にレンダリングこれにより。