Angularjs 角度用户界面模式窗口上的谷歌地图_Angularjs_Google Maps_Angular Ui_Bootstrap Modal

Angularjs 角度用户界面模式窗口上的谷歌地图

angularjs google-maps

Angularjs 角度用户界面模式窗口上的谷歌地图,angularjs,google-maps,angular-ui,bootstrap-modal,Angularjs,Google Maps,Angular Ui,Bootstrap Modal,我有一个要求，若我点击一个链接，一个模态窗口应该和谷歌地图一起抛出我一直在使用谷歌地图javascript api。对于模态，已经使用了AngularUI引导模态当我使用nginit时，我能够显示地图，但这只是第一次。当我第二次点击时，地图变灰了。所以，我想，我可以扔地图，一旦模态完全加载。但在导出map元素的节点时，我面临着一个问题我哪里出了问题。如果可能的话，有人能给我指一下正确的方向吗 Modal HTML <!-- This page shows the modal wind

我有一个要求，若我点击一个链接，一个模态窗口应该和谷歌地图一起抛出

我一直在使用谷歌地图javascript api。对于模态，已经使用了AngularUI引导模态

当我使用nginit时，我能够显示地图，但这只是第一次。当我第二次点击时，地图变灰了。所以，我想，我可以扔地图，一旦模态完全加载。但在导出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>

模态窗口的控制器：

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']);

非常感谢

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']);