单击显示时不会加载Google地图

时间:2017-10-31 12:40:05

标签: javascript jquery html angularjs google-maps

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

2 个答案:

答案 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();
    });
}