angular-google-maps ora viene mostrato correttamente quando è nascosto all'inizio

Quando la mappa inizia nascosta con ng-show/ng-hide, non viene visualizzata correttamente una volta visibile. Lo stesso problema con una mappa standard, solo noi possiamo inviare un ridimensionamento ad esso dal momento che abbiamo accesso all'oggetto mappa.angular-google-maps ora viene mostrato correttamente quando è nascosto all'inizio

Ecco un esempio che inizia con la mappa nascosta. Il pulsante attiva la visibilità della mappa.

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

con Google-maps in js, vorrei inviare un ridimensionamento per l'oggetto della mappa, ma non hanno accesso ad essa in angolare-google-maps.

fonte

2014-05-16 Kristian Benoit

Hai ragione, non è tanto e vorrei essere in grado di, se ho avuto accesso alla mappa oggetto angolare-google-maps. –

ho trovato la soluzione here

Aggiungere un attributo di controllo al tag google-map:

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

Poi nel controller, impostare $ scope.myGoogleMap a {}, sarà riempito quando le mappe vengono inizializzate. Dopodiché puoi usare $ scope.myGoogleMap.refresh() per inviare un ridimensionamento alla mappa!

Ecco il controller che funziona.

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

fonte

2014-05-17 02:28:52

invece di utilizzare $ watch on visible usa questo: uiGmapIsReady.promise(). Then (function (maps) { $ scope.myGoogleMap.refresh(); }); – lobengula3rd

L'aggiornamento ha qualche effetto sui numeri di quota giornalieri? In altre parole, il carico di una pagina viene eseguito in questo modo contando come due? – jmq

@jmq: no, forza un aggiornamento simulando un ridimensionamento se ricordo correttamente. –

Provare a utilizzare ng-if invece ng-show/ng-hide. Angular-google-maps ha un problema con ng-show/ng-hide.

Vai a questa https://github.com/nlaplante/angular-google-maps/issues/291

fonte

2014-05-21 15:13:09 Vahi

Grazie, ho avuto problemi con l'animazione di ng-show e ora sto usando il crollo di ui-bootstrap. –

Questo ha risolto il problema senza alcun codice aggiuntivo. Questo è anche menzionato nelle FAQ angular-google-maps. –

Funziona come un fascino! Grazie! – Nat

angular-google-maps ora viene mostrato correttamente quando è nascosto all'inizio

risposta

Problemi correlati