Угловые Google Карты внутри аккордеона становятся пустыми первый раз

Question

Я использую Angular Google Maps с bootstrap3 и html5. Я использую угловые карты Google внутри accordion.

Проблема заключается в том, что когда я пишу Угловые Карты Google внутри аккордеона, он сначала отображается как пустой, но когда я возвращаюсь на эту страницу (состояние), просматривая другую страницу (состояние), тогда я работаю нормально. Если я не использую аккордеон, тогда он отлично работает.

Вот код аккордеона, который впервые показывает пустое место.

<accordion close-others="true"> 
    <accordion-group heading="Karta" is-open="map.open"> 
     <div class="panel-body"> 
      <div class="col-sm-12 col-xs-10 angular-google-map-container">         

       <ui-gmap-google-map center="localMap.center" zoom="localMap.zoom" events="localMap.events" draggable="true" refresh="localMap.refreshMap" ng-class="{'crosshair': waitingForInput}"> 
        <ui-gmap-markers idKey="id" models="localMap.markers" coords="'self'" fit="'true'" options="'options'">   
        </ui-gmap-markers> 
       </ui-gmap-google-map> 

      </div> 
     </div> 
    </accordion-group> 
</accordion> 

И если удалить аккордеон, то он работает все время.

<div class="panel-body"> 
    <div class="col-sm-12 col-xs-10 angular-google-map-container">         

     <ui-gmap-google-map center="localMap.center" zoom="localMap.zoom" events="localMap.events" draggable="true" refresh="localMap.refreshMap" ng-class="{'crosshair': waitingForInput}"> 
      <ui-gmap-markers idKey="id" models="localMap.markers" coords="'self'" fit="'true'" options="'options'">   
      </ui-gmap-markers> 
     </ui-gmap-google-map> 

    </div> 
</div> 

Пожалуйста, помогите мне решить эту проблему.

Answer 1

У меня была такая же проблема, когда у меня был div с директивой ng-show, которая была оценена в false изначально при просмотре, и элемент карты Карт Google тоже будет инициализирован на просмотр-загрузке. Но div, который я передал в Google Maps api, чтобы инициализировать элемент карты, находился внутри div ng-show='false', и будет отображаться пустая карта.

Я решил это, изменив инициализацию элемента карты, когда директива ng-show оценила значение true.

Я думаю, было бы лучше, если бы вы создали элемент карты Карт Google, когда аккордеон был открыт.

У меня было все это в соответствии с индивидуальной директивой, поэтому было легко разместить прицел в режиме link. Проводка кода для будущих пользователей, которые могут столкнуться с одной и той же проблемой.

angular.app('module').directive('customDirective', function ($timeout) { 
    return { 
     template: '...', 
     link: function(scope, element) { 
      var mapInitialized = false; # To track if map has already been initialized. 
      var mapOptions = {...}; 
      var initMap = function() { 
       map = new google.maps.Map(element.find(".map-elem")[0], mapOptions); 
       mapInitialized = true; 
      }; 
      scope.$watch 'isMapElemContainerShown', function(newValue, oldValue) { 
       if (newValue == oldValue) return; 
       if (newValue && !mapInitialized) { 
        $timeout(initMap, 100); # Allow delay for view element to update to be visible. 
       } 
      } 
     } 
    } 
} 

Answer 2

Вы можете использовать объект управления (http://angular-ui.github.io/angular-google-maps/#!/api/google-map)

<ui-gmap-google-map center='center' control='control'> 
</ui-gmap-google-map> 

В контроллере укажите пустой объект управления (он инициализируется автоматически). Используйте его, чтобы обновить карту, когда аккордеон открывается.

$scope.control = {}; 

$scope.$watch("map.open", function (newVal) { 
    if (newVal) { 
     $timeout(function() { 
      $scope.control.refresh(center); 
     }); 
    } 
});