我的Google地图已隐藏,当我点击上一个按钮时,会使用ng-show
显示该地图。问题是它没有加载/初始化。它只是保持灰色。我试过"resize"
但什么也没做。我已尝试使用onclick="displayMap()"
并使用display none/block
,但它也无效。没有控制台错误。
答案 0 :(得分:1)
这是一个已知问题(例如参见here),一旦父div display
样式设置为none
,地图大小就无法正确确定。两个ng-hide
/ ng-show
指令都通过操纵显示样式来隐藏/显示给定元素。
一种解决方案是使用ng-class
/ ng-style
指令替换ng-show
来控制地图的可见性,如下所示:
angular.module('myApp', [])
.controller('MapCtrl', [
'$scope', function ($scope) {
$scope.mapIsVisible = false;
$scope.toggleMap = function(){
$scope.mapIsVisible = !$scope.mapIsVisible;
};
$scope.initMap = function () {
var center = new google.maps.LatLng(-33.870501, 151.206704);
var mapOptions = {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
$scope.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', $scope.initMap);
}]);
#map-canvas {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="script.js"></script>
<div ng-app="myApp">
<div ng-controller="MapCtrl">
<button ng-click="toggleMap()">Toggle map</button>
<div ng-style="{'visibility': mapIsVisible ? 'visible':'hidden'}">
<div id="map-canvas"></div>
</div>
</div>
</div>
答案 1 :(得分:0)
您可以使用callback
进行此操作..
function displayMap(){
jQuery("#mapDiv").fadeIn("fast",function(){
initMap();
});
}