javascript - 单击时显示谷歌地图不加载

Question

我的谷歌地图是隐藏的，当我点击上一个按钮时，它会使用 ng-show 显示。问题是它不加载/初始化。它只是保持灰色。我试过 "resize" 但什么也没做。我试过使用 onclick="displayMap()" 并使用 display none/block 但它也不起作用。没有控制台错误。

Answer 1

这是一个已知问题(参见示例 here)，一旦父 div display 样式设置为 none， map 大小就无法正确确定。两者 ng-hide/ng-show指令通过操纵显示样式隐藏/显示给定元素。

一个解决方案是将 ng-show 替换为 ng-class/ng-style控制 map 可见性的指令如下所示:

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>