mapowanie kątowe-google jest teraz poprawnie wyświetlane, gdy jest ukryte na początku

Gdy mapa zaczyna się ukrywać przy pomocy ng-show/ng-hide, nie wyświetla się poprawnie, gdy jest widoczna. Takie same kłopoty ze standardową mapą, tylko możemy wysłać do niej zmianę rozmiaru, ponieważ mamy dostęp do obiektu mapy.mapowanie kątowe-google jest teraz poprawnie wyświetlane, gdy jest ukryte na początku

Oto próbka, która zaczyna się od ukrytej mapy. Przycisk przełącza widoczność mapy.

<!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>

Z Google map w JS, chciałbym wysłać do zmiany rozmiaru obiektu mapy, ale nie mam do niego dostęp w kątowym-google-map.

Źródło

2014-05-16 Kristian Benoit

Masz rację, to nie jest dużo i chciałbym móc to gdybym miał dostęp do kątowa-google-maps mapy obiektu. –

znalazłem rozwiązanie here

dodać atrybut sterowania do znacznika google-mapy:

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

Następnie w kontroler, zestaw $ scope.myGoogleMap do {}, zostanie on wypełniony po Mapy zostają zainicjalizowane. Następnie możesz użyć $ scope.myGoogleMap.refresh(), aby przesłać zmianę rozmiaru na mapę!

Oto kontroler działa.

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

Źródło

2014-05-17 02:28:52

zamiast używać $ watch na widocznym użyciu: uiGmapIsReady.promise(). Then (function (maps) { $ scope.myGoogleMap.refresh(); }); – lobengula3rd

Czy odświeżenie ma wpływ na dzienne numery kontyngentów? Innymi słowy, czy jedna strona ładuje się w ten sposób, licząc jako dwie? – jmq

@jmq: nie, wymusza odświeżanie poprzez symulowanie zmiany rozmiaru, jeśli poprawnie przywołuję. –

Spróbuj użyć ng-if zamiast tego ng-show/ng-hide. Angarys-google-maps ma problem z ng-show/ng-hide.

Zobacz ten https://github.com/nlaplante/angular-google-maps/issues/291

Źródło

2014-05-21 15:13:09 Vahi

Dzięki, miałem problemy z animacją programu ng-show i teraz używam zapadki ui-bootstrap. –

Naprawiono problem dla mnie bez dodatkowego kodu. Jest to również wspomniane w najczęstszych pytaniach dotyczących map kątowych. –

Działa jak urok! Dziękuję Ci! – Nat

mapowanie kątowe-google jest teraz poprawnie wyświetlane, gdy jest ukryte na początku

Odpowiedz

Powiązane problemy