시작시 숨겨져있을 때 angular-google-maps가 올바르게 표시됩니다.

지도가 ng-show/ng-hide로 숨기기 시작하면 올바르게 표시되지 않습니다. 표준지도에서와 같은 문제는지도 객체에 액세스 할 수 있기 때문에 크기를 보낼 수 있습니다.시작시 숨겨져있을 때 angular-google-maps가 올바르게 표시됩니다.

다음은지도가 숨겨진 채로 시작하는 샘플입니다. 버튼은지도의 표시 여부를 토글합니다.

JS에서 구글 -지도와

<!doctype html> 
<html> 
    <head> 
     <style> 
      .angular-google-map-container { 
       width: 100%; 
       height: 100px; 
      } 
      .mymap { 
       width: 100%; 
       height: 100px; 
      } 
     </style> 
    </head> 
    <body ng-app="app" ng-controller="myCtrl"> 
     <button ng-click="visible = !visible">ToogleMap</button> 
     <div ng-show="visible"> 
      <google-map center="map.center" zoom="map.zoom"></google-map> 
      <div class="mymap"></div> 
     </div> 
     <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js'></script> 
     <script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script> 
     <script src='http://underscorejs.org/underscore-min.js'></script> 
     <script src='https://rawgithub.com/nlaplante/angular-google-maps/master/dist/angular-google-maps.min.js'></script> 
     <script> 
      var app = angular.module("app", ["google-maps"]); 
      app.controller("myCtrl", function($scope, $timeout) { 
       $scope.map = { 
        center: { 
         latitude: 45.4, 
         longitude: -71.9 
        }, 
        zoom: 11 
       }; 
       $scope.visible = false; 
      }); 
     </script> 
    </body> 
</html>

, 나는지도 개체에 크기 조정을 보낼 것입니다,하지만 난 각도 - 구글 -지도에서 액세스 할 수 없습니다.

출처

2014-05-16 Kristian Benoit

이 훨씬 아닌 참조 내가 각도 - 구글 -지도지도 개체에 대한 액세스가 있다면 나는 그것을 할 수 있도록하고 싶습니다. –

내가 here

는 구글 맵 태그에 제어 속성을 추가 해결책 발견에 컨트롤러에서 다음

<google-map 
    center="mapOption.center" 
    zoom="mapOption.zoom" 
    control="myGoogleMap"> 
</google-map>

설정 $ scope.myGoogleMap을 {}, 그것은 때 채워집니다 맵이 초기화됩니다. 그 후에 $ scope.myGoogleMap.refresh()를 사용하여지도에 크기를 보낼 수 있습니다!

여기 컨트롤러가 작동합니다.

app.controller("myCtrl", function($scope, $timeout) { 
    $scope.mapOption = { 
     center: { 
      latitude: 45.4, 
      longitude: -71.9 
     }, 
     zoom: 11 
    }; 
    $scope.visible = false; 
    $scope.mapViewPosition = {}; 
    $scope.$watch("visible", function(newvalue) { 
     $timeout(function() { 
      var map = $scope.myGoogleMap.refresh(); 
     }, 0); 
    }); 
});

출처

2014-05-17 02:28:52

대신 $ watch를 사용하면 다음을 사용합니다. uiGmapIsReady.promise(). (function (maps) { $ scope.myGoogleMap.refresh(); }); – lobengula3rd

새로 고침은 일일 할당량에 어떤 영향을 미칩니 까? 즉, 한 페이지로드가 두 번 계산되는 방식으로 수행됩니까? – jmq

@jmq : 아니요, 정확하게 리콜하면 크기를 시뮬레이트하여 새로 고침을 강제합니다. –

ng-show/ng-hide 대신 ng-if를 사용해보세요. Angular-google-maps에 ng-show/ng-hide 문제가 있습니다.

당신 말이 맞아이 https://github.com/nlaplante/angular-google-maps/issues/291

출처

2014-05-21 15:13:09 Vahi

감사합니다. ng-show의 애니메이션에 문제가있어서 ui-bootstrap collapse를 사용 중입니다. –

추가 코드없이이 문제가 해결되었습니다. 이것은 angular-google-maps FAQ에도 언급되어 있습니다. –

매력처럼 작동합니다! 고맙습니다! – Nat

시작시 숨겨져있을 때 angular-google-maps가 올바르게 표시됩니다.

답변

관련 문제