angularjs - 模态内的 NgMap(谷歌地图) - 不显示第二次

Question

我正在使用 NgMap 在我的 Angular 应用程序的模态内生成 map 。模式是使用 Controller 中的 $modal 注入(inject)器生成的，并使用模板 View 构建 html 代码。

模态框第一次出现时效果很好。虽然，第二次 map 完全乱了。 它显示了 map 的一些部分，其余部分覆盖着浅灰色。

这是初始化模态的内容

$modal.open({
    templateUrl: 'views/partials/modals/storeShowModal.html',
    controller: 'ModalShowStore',
    resolve: {
        store: function() {
            return store;
        }
    }
}); 

这是模态 Controller

appControllers.controller('ModalShowStore', ['$scope', '$modalInstance', 'store', 'NgMap', function ($scope, $modalInstance, store, NgMap) {

    $scope.center = store.latitude+","+store.longitude;
    $scope.position = store.latitude+","+store.longitude;

    NgMap.getMap().then(function(map) {});

    $scope.store = store;

    $scope.cancel = function () {
        $modalInstance.close();
    };

}]);

这是模板html

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h4 class="modal-title text-align-center fw-bold mt" id="myModalLabel18">{{ store.name }}</h4>
</div>
<div class="modal-body bg-gray-lighter">
    <div class="row">
        <div class="col-md-12">
            <ng-map center="{{ center }}" zoom="15">
                <marker position="{{ position }}"></marker>
            </ng-map>
        </div>
    </div>
</div>

任何想法，任何想法都非常欢迎。我想这与 html 的动态加载有关。谢谢。

编辑

根据要求，这是我的相当大的 bower.json

{
  "name": "sing",
  "version": "1.1.1",
  "description": "Sing Dashboard App",
  "main": "index.html",
  "authors": [
    "okendoken flatlogic.com"
  ],
  "dependencies": {
    "jquery": "~2.1.3",
    "jquery-pjax": "~1.9.4",
    "bootstrap-sass": "3.3.4",
    "font-awesome": "~4.3.0",
    "bootstrap-select": "~1.6.3",
    "select2": "~3.5.2",
    "select2-bootstrap-css": "~1.4.6",
    "jasny-bootstrap": "~3.1.3",
    "slimScroll": "~1.3.3",
    "widgster": "~0.0.2",
    "pace.js": "git://github.com/HubSpot/pace.git#v0.7.1",
    "animate.css": "~3.2.0",
    "jquery-touchswipe": "~1.6.8",
    "awesome-bootstrap-checkbox": "~0.3.3",
    "angular": "1.6.3",
    "angular-ui-router": "~0.2.13",
    "ngstorage": "~0.3.0",
    "angular-ui-utils": "bower-event",
    "angular-bootstrap": "2.5.0",
    "angular-animate": "1.6.3",
    "angular-bootstrap-select": "~0.0.5",
    "angular-datatables": "0.4.2",
    "angular-resource": "~1.3.14",
    "angular-ui-calendar": "~0.8.1",
    "backbone": "~1.1.2",
    "backbone.paginator": "~2.0.2",
    "backgrid": "~0.3.5",
    "backgrid-paginator": "03632df8ad238e3d043c0fd471a6c78494e1bdfc",
    "jquery.sparkline": "http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js",
    "d3": "~3.5.4",
    "rickshaw": "~1.5.1",
    "nvd3": "~1.7.1",
    "morris.js": "~0.5.1",
    "flot": "~0.8.3",
    "flot.animator": "https://github.com/Codicode/flotanimator.git#3c256c0183d713fd3bf41d04417873928eb1a751",
    "flot-orderBars": "https://github.com/emmerich/flot-orderBars.git#d44ff4f2fec4c8bb1254e59567ee39fa3684372e",
    "jquery-autosize": "~1.18.17",
    "bootstrap3-wysihtml5": "git://github.com/schnawel007/bootstrap3-wysihtml5.git#5f07036cb228c1cc8bab2d271701ceff0de66828",
    "switchery": "~0.7.0",
    "eonasdan-bootstrap-datetimepicker": "~3.1.3",
    "mjolnic-bootstrap-colorpicker": "~2.0.1",
    "holderjs": "~2.5.0",
    "dropzone": "~4.0.0",
    "jQuery-Mapael": "https://github.com/neveldo/jQuery-Mapael.git#v0.7.1",
    "gmaps": "~0.4.16",
    "markdown": "~0.5.0",
    "to-markdown": "~0.0.3",
    "bootstrap-markdown": "~2.8.0",
    "seiyria-bootstrap-slider": "~4.4.2",
    "bootstrap_calendar": "~1.0.1",
    "jvectormap": "http://jvectormap.com/binary/jquery-jvectormap-1.2.2.zip",
    "jvectormap-world": "http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js",
    "parsleyjs": "~2.0.7",
    "twitter-bootstrap-wizard": "git://github.com/VinceG/twitter-bootstrap-wizard.git#62a9aca8cc61fdb496c4bf7b92e1ff70c698667e",
    "bootstrap-application-wizard": "git://github.com/amoffat/bootstrap-application-wizard.git#3768da3142f43428c5f63284407a2481a9e283d3",
    "jquery-ui": "~1.11.2",
    "jquery-ui-touch-punch": "git://github.com/furf/jquery-ui-touch-punch.git#4bc009145202d9c7483ba85f3a236a8f3470354d",
    "datatables": "~1.10.4",
    "jquery.nestable": "git://github.com/dbushell/Nestable.git#4f93032cfafe2002f24ed6bd7dc1510931498503",
    "messenger": "~1.4.1",
    "jquery.easy-pie-chart": "~2.1.6",
    "fullcalendar": "~1.6.7",
    "shufflejs": "~3.0.2",
    "magnific-popup": "~1.0.0",
    "jquery-animateNumber": "https://github.com/aishek/jquery-animateNumber.git#v0.0.10",
    "MetroJS": "https://github.com/drewgreenwell/MetroJS.git#b70806b32e070073c17677402e64ed909e24a6ef",
    "skycons": "https://github.com/darkskyapp/skycons.git#60d41374ea97c5da1f92622ddcecca6dd1d9beed",
    "ngmap": "^1.18.0",
    "angular-ui-select2": "^0.0.5"
  },
  "private": true,
  "ignore": [
    "**/.*",
    "vendor"
  ],
  "resolutions": {
    "jquery": "~2.1.3",
    "d3": "~3.5.4",
    "underscore": ">=1.5.0",
    "bootstrap": "~3",
    "angular": "~1.3.14",
    "bootstrap-select": "~1.6.3",
    "jquery-ui": "~1.11.2"
  }
}

更新

当不使用模式而只是使用 div 时，问题仍然存在。当我隐藏 div 并再次显示它时， map 全部变灰。有趣的是，当我打开 Chrome 的控制台时， map 出现了。

Answer 1

尝试在 map 初始化后显式调用 resize 事件:

NgMap.getMap().then(function (map) {
     google.maps.event.trigger(map, "resize"); 
});

例子

angular.module('app', ['ngMap', 'ui.bootstrap'])

    .controller('myCtrl', function ($scope, $uibModal) {
       


        $scope.showModal = function () {
            $scope.modal = $uibModal.open({
                templateUrl: 'storeShowModal.html',
                controller: 'ModalShowStore',
                resolve: {
                    store: function () {
                        return { "latitude": 51.5285578, "longitude": -0.242023 };
                    }
                }
            });
        };

        $scope.closeModal = function () {
            $scope.modal.close();
        };
    })

    .controller('ModalShowStore', function ($scope,$uibModalInstance, NgMap, store) {
        
        
        $scope.center = [store.latitude,store.longitude];
        $scope.position = [store.latitude,store.longitude];
        

       
        NgMap.getMap().then(function (map) {
             google.maps.event.trigger(map, "resize"); 
        });
        
        $scope.store = store;

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

  <script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script data-require="angularjs-google-maps@1.13.14" data-semver="1.13.14" src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script data-require="ui-bootstrap@2.5.0" data-semver="2.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://maps.google.com/maps/api/js"></script>

<div ng-app="app">

 <script type="text/ng-template" id="storeShowModal.html">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h4 class="modal-title text-align-center fw-bold mt" id="myModalLabel18">{{ store.name }}</h4>
</div>
<div class="modal-body bg-gray-lighter">
    <div class="row">
        <div class="col-md-12">
            <ng-map center="{{ center }}" zoom="10">
                <marker position="{{ position }}"></marker>
            </ng-map>
        </div>
    </div>
</div>
</script> 

<div  ng-controller="myCtrl">
  <div>
    <button ng-click="showModal()">Show Modal</button>
  </div>
</div>


</div>