Webcomponents google-map在隐藏app-drawer后右侧显示灰色区域答案

【问题标题】：Webcomponents google-map displays gray area to the right after hiding app-drawerWebcomponents google-map在隐藏app-drawer后右侧显示灰色区域
【发布时间】：2017-11-02 08:02:24
【问题描述】：

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

我发现的关于这个问题的所有讨论都说解决方案是触发地图的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 中。

【问题讨论】：

这看起来 200% 是一个调整大小的问题，并且触发地图调整大小应该是解决方案，除非你有一些花哨的 CSS 会导致这种行为。您是否尝试过使用opened-changed 事件而不是app-drawer-transitioned？
也许也可以看看这里：github.com/PolymerElements/app-layout/issues/108 可能是文档不是完全最新的。抱歉，我根本不知道 app-drawer，但这可能会有所帮助。
@MrUpsidown 想通了——我试图在 DOM 元素而不是 API 对象上触发事件。顺便说一句，opened-changed 事件不起作用，我想它可能会在抽屉完成打开/关闭之前被调用。
对，是的，您必须在地图对象本身上调用它。很高兴你想出来了。所以你不需要setTimeout，对吧？

标签： javascript google-maps google-maps-api-3 web-component google-web-component

【解决方案1】：

原来我试图在 DOM 元素而不是 Maps API 对象上触发 resize 事件。 Maps API 对象可以通过<google-map> DOM 元素的.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>

【讨论】：