google-maps web组件显示空白

Question

我在Polymer中使用了google-maps web组件，并遵循了下面的示例：

<google-map latitude="7.1907"
                longitude="125.4553"
                api-key="{{apiKey}}"
                on-google-map-ready="mapReady"></google-map>

使用以下样式：

google-map {
  width: 100%;
  height: 200px;
  display: block;
}

但是它是这样显示的：

​

​

我试着使用响应性，每次屏幕改变地图加载时，有什么想法或解决方案吗？谢谢

​

​

Answer 1

现在得到了解决方案。根据documentation，我使用了google-map组件的resize()方法

显式地调整贴图的大小，更新其中心。如果在取消隐藏贴图后贴图不显示，则此选项非常有用。

我从未隐藏过地图，但我使用了iron-pages (因此它确实隐藏了地图)，并且第一次调用了地图就绪函数，但放置地图的页面在当前位置是隐藏的(这就是它不会显示任何内容的原因)。因此，我尝试刷新地图后，铁页将显示地图所在的页面。

​

​