0

我有一个<google-map>inside a <app-drawer-layout>，它工作正常，除了当抽屉被隐藏时地图在右侧显示一个灰色区域。

在此处输入图像描述

在此处输入图像描述

我发现的关于这个问题的所有讨论都说解决方案是触发resize地图事件，但这对我不起作用。为了安全起见，我什至尝试添加延迟，但它仍然没有任何作用。

document.querySelector('app-drawer').addEventListener('app-drawer-transitioned', function(){
    window.setTimeout(function(){
        console.log( map.clientWidth );
        google.maps.event.trigger(map, 'resize');
    }, 100);
});

控制台输出确认地图宽度确实在触发调整大小事件之前发生了变化，但灰色区域仍然存在。即使我平移和缩放地图，灰色区域仍然存在（尽管它会根据平移变宽或变窄）。唯一似乎可以纠正它的是调整整个浏览器窗口的大小。

顺便说一句，这是在 Mac 上的 Chrome 中。

4

1 回答 1

0

结果是我试图resize在 DOM 元素而不是 Maps API 对象上触发事件。Maps API 对象可以通过DOM-element的.map属性获得。<google-map>

这对我有用

<script>
    var mapElem = document.querySelector('google-map');

    mapElem.addEventListener('api-load', function(e) {
        var mapObj = mapElem.map;

        document.querySelector('app-drawer').addEventListener('app-drawer-transitioned', function(){
            google.maps.event.trigger(mapObj, 'resize');
        });
    });
</script>
于 2017-11-02T11:55:29.137 回答