google-maps - 谷歌地图的“仅显示左上角”，在 Angular JS 中使用 gMaps.js

Question

我检查了谷歌地图的原生 API 中有 checkresize() 方法。但它似乎不适用于 gmaps.js 的刷新功能。

有人在使用 AngularJS 和 gMaps.js 时遇到过类似的问题吗？你怎么来解决它？

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

Answer 1

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

我将我的 ng-show 切换为 ng-if 并且它工作正常。这是因为地图代码（我使用了指令）在 if 条件为真之前不会运行，这允许它正确呈现。

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

重要的是，在您的容器元素实际显示之前，google 脚本不会开始执行它们的操作。这是通过 ng-if 完成的。

Answer 2

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

“ngCloak 指令用于防止 Angular html 模板被浏览器短暂显示”

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

Answer 3

地图无需调整大小即可成功渲染。

为什么调整大小给你正确的地图？

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

如何解决？

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

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'); 
            });
        });