模态内的 NgMap（Google 地图）- 第二次未显示
NgMap (Google map) inside a modal - not showing the second time
我使用 NgMap 在我的 Angular 应用程序中的模态内生成地图。模态是使用控制器中的 $modal 注入器生成的，并使用模板视图构建 html 代码。
模态框第一次出现时效果很好。虽然，第二次地图完全乱了。 它显示了地图的一些部分，其余部分被灰色覆盖。
这是初始化模态的内容
$modal.open({
templateUrl: 'views/partials/modals/storeShowModal.html',
controller: 'ModalShowStore',
resolve: {
store: function() {
return store;
}
}
});
这是模态控制器
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">×</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 并再次显示它时，地图全部变灰。有趣的是，当我打开 Chrome 的控制台时，地图出现了。
我找到了一个非常非常便宜的解决方案，它与我一开始想要的不太一样，但现在可以用了。如果更改高度，地图将能够自行显示。为什么 class="hidden" 不是，或者 style="display:none"，我不知道...好吧，这样就可以了：
$scope.openMap = function (id) {
var map = document.getElementById('map' + id);
if (map.style.height == '400px') {
map.style.height = '0px';
} else {
map.style.height = '400px';
}
}
尝试在地图初始化后显式调用 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">×</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>
我使用 NgMap 在我的 Angular 应用程序中的模态内生成地图。模态是使用控制器中的 $modal 注入器生成的，并使用模板视图构建 html 代码。
模态框第一次出现时效果很好。虽然，第二次地图完全乱了。 它显示了地图的一些部分，其余部分被灰色覆盖。
这是初始化模态的内容
$modal.open({
templateUrl: 'views/partials/modals/storeShowModal.html',
controller: 'ModalShowStore',
resolve: {
store: function() {
return store;
}
}
});
这是模态控制器
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">×</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 并再次显示它时，地图全部变灰。有趣的是，当我打开 Chrome 的控制台时，地图出现了。
我找到了一个非常非常便宜的解决方案，它与我一开始想要的不太一样，但现在可以用了。如果更改高度，地图将能够自行显示。为什么 class="hidden" 不是，或者 style="display:none"，我不知道...好吧，这样就可以了：
$scope.openMap = function (id) {
var map = document.getElementById('map' + id);
if (map.style.height == '400px') {
map.style.height = '0px';
} else {
map.style.height = '400px';
}
}
尝试在地图初始化后显式调用 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">×</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>