角谷歌地圖顯示

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條件哪裏有地圖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渲染。