谷歌地图在点击时显示不加载答案

【问题标题】：Google map does not load when displayed onclick谷歌地图在点击时显示不加载
【发布时间】：2017-10-31 12:40:04
【问题描述】：

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

【问题讨论】：

嗯，它应该是。您确定在ng-show 显示地图后调用resize 吗？也许不是，在ng-show 条件为真后，尝试用setTimeout 调用resize 方法。另外，检查this的答案，也许会有所帮助。
setTimeout 不起作用，但我可能做得不对。我不知所措。 :S
就我所见，ng-show 是这个!validacion12()，对吧？你有没有尝试在这个函数之后调用调整大小？
调整大小在 initMap() 中。我在 validacion12() 的条件内尝试了 initMap() （在另一个文件中），但它也不起作用。结果是： $scope.validacion12 = function() { if( $scope.codigo_regalo != null && $scope.codigo_regalo != "" && $scope.codigo_regalo == $scope.codigo_regalo_valido ) { $scope.novalid1 = "false ";显示地图（）；返回假； } 其他 { $scope.novalid1 = "真";返回真； } };

标签： javascript jquery html angularjs google-maps

【解决方案1】：

这是一个已知问题（例如参见 here），一旦父 div display 样式设置为 none，地图大小将无法正确确定。 ng-hide/ng-show 指令都通过操作显示样式隐藏/显示给定元素。

一种解决方案是将ng-show 替换为ng-class/ng-style 指令来控制地图的可见性，如下所示：

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>

【讨论】：

谢谢它现在像在你的例子中那样初始化，但是当我输入一个城市时，它不显示标记（也不显示它周围的圆圈），如果我在地图上移动，那么一些部分仍然是灰色的，所以它就像它只初始化一次然后停止工作。我想我现在需要就这个问题提出另一个问题。
@JJCarlk3，这听起来像是一个不同的问题，所以创建一个单独的问题是个好主意
好吧，我不知道发生了什么，但现在它甚至不会工作一次。 :S

【解决方案2】：

您可以为此使用callback..

function displayMap(){
    jQuery("#mapDiv").fadeIn("fast",function(){
        initMap();
    });
}

【讨论】：

回调？如何？像这样？不幸的是，上面的代码什么也没做。 ://