Question

我有要求，如果我点击一个链接，应该用谷歌地图抛出一个模态窗口。

我一直在使用谷歌地图javascript api。对于模态，一直使用angular-ui bootstrap模态。

当我使用ng-init时，我能够显示地图，但仅限第一次使用。当我第二次点击时，地图会变灰。所以，我想，一旦模态完全加载，我就可以抛出地图。但是在导出map元素的节点时，我面临着问题。

我在某个地方出错了。如果可能的话，任何人都可以指出我正确的方向。

Modal HTML
<!-- This page shows the modal window when user clicks on any of the route -->
<html>
<head>  
</head>
<body>                  
    <div class="modal-content" id="mw">
        <div class="modal-header">                  
             <h4 id="jd">Route map for {{routeName}}</h4>   
        </div>
        <div class="modal-body">                            
            <div id="googleMap" style="width:1000px;height:380px;margin:auto;"></div>           
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div> 
    </div>       
 </body>
 </html>

角度控制器逻辑：控制器调用模态窗口。

var pltcrwapp = angular.module('pilotCrewApp', ['ui.bootstrap']);
pltcrwapp.controller("PilotCrewController", [
        '$scope',
        'PCService',
        'alertsManager',
        '$compile',    
        '$uibModal',
        function($scope, PCService, alertsManager, $compile, $uibModal) {

            $scope.hitRoute = function(par) {
                //alert(par);                               
                $scope.routeName = par;
                var modalInstance = $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: '/PilotReport/dialogs/routeDetails.gsp',
                controller: 'ModalInstanceCtrl',
                size: 'lg',
                resolve: {
                  routeName: function () {                    
                                return $scope.routeName;
                             }
                         }
                });
            }  

}]);

模态窗口的控制器：

pltcrwapp.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, routeName) {  
      $scope.routeName = routeName;              

      $uibModalInstance.opened.then(function(){
              alert('loaded');
              //var jaf = $("#googleMap").get(0);
              var eff = angular.element($('#googleMap'))
              alert(jaf.nodeName);
              var chicago = {lat: 41.85, lng: -87.65};
                var indianapolis = {lat: 39.79, lng: -86.14};
                var mapProp = {
                        center:chicago,
                        scrollwheel: false,
                        zoom:7
                };              
                //var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
                var map=new google.maps.Map(eff, mapProp);
      });        

      $scope.ok = function () {
        $uibModalInstance.close($scope.routeName);
      };

      $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };      
});

//Since we use ng-app directive, manual initialization is not required.
//angular.bootstrap is for manual initialization
//angular.bootstrap(document, ['pltcrwapp']);

非常感谢..

角度ui模态窗口上的谷歌地图

0 个答案: