각도 구글지도 표시

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); 

DOM 모든 값 잠시 후 렌더링이 우리의 HTML을 수행함으로써.