谷歌地图的“仅显示左上方的瓷砖”，使用Angular JS中的gMaps.js

Question

我检查了google Map的原生API中有checkresize（）方法..但它似乎不适用于gmaps.js的刷新功能。

有没有人使用AngularJS和gMaps.js有类似的问题？你怎么来解决它？

调整窗口大小后，地图再次出现。所以我想在gMap.js初始化时检查调整大小？

Answer 1

当我尝试时，

ng-cloak对我不起作用。我认为这是因为我在一个面板中使用了地图，该面板扩展了用户交互，而不是在加载时可见。

我将ng-show切换为ng-if并且它正常工作。这是因为地图代码（我使用directive）在if条件为真之前不会运行，这样就可以正确渲染。

*对不起小提琴被删除了。我不记得我里面有什么，但它就像这样 <gmap unique="231" center="{{getAddress(item)}}" destination="{{getAddress(item)}}" origin="{{getMyAddress(item)}}" type="roadmap" marker-content="Hello"></gmap>

重要的是，在实际显示容器元素之前，谷歌脚本不会开始做他们的事情。这是通过ng-if。

完成的

Answer 2

在地图元素或指令元素上添加ng-cloak属性。

＆＃34; ngCloak指令用于防止浏览器短暂显示Angular html模板＆＃34;

http://docs.angularjs.org/api/ng.directive:ngCloak

Answer 3

成功渲染地图而不调整大小。

为什么调整大小会为您提供合适的地图？

因为浏览器再次绘制视图。

如何解决？

要在最近触发的任何面板中获得正确的地图布局，必须在加载面板后绘制地图。这可以通过（setTimeout）代码实现，如下所述。 代码目标是在60毫秒后触发map resize事件。

setTimeout(function () {
        uiGmapIsReady.promise().then(function (maps) {
            google.maps.event.trigger(maps[0].map, 'resize');
            lat = -37;
            lon = 144;
            maps[0].map.panTo(new google.maps.LatLng(lat,lon));
            var marker = {
                id: Date.now(),
                coords: {
                    latitude: lat,
                    longitude: lon
                }
            };
            $scope.map.markers = [];
            $scope.map.markers.push(marker);
            console.log($scope.map.markers);
        });
    }, 60);

Answer 4

尝试使用控制器中的以下代码调整地图大小：

        NgMap.getMap().then(function(map){
            google.maps.event.addListener(map, "idle", function(){
                google.maps.event.trigger(map, 'resize'); 
            });
        });