Question

我正在使用google-map元素，我读到了.resize（）技巧来修复google-map元素的大小。

然而，我无法让它发挥作用。更多，它对我没有意义。

在我的申请中：

只有显示地图的第一页才能正确呈现。另一个渲染地图的页面无法正确呈现。
如果呈现的第一个页面不包含地图，如果我转到带有地图的另一个页面，地图会正确呈现。

这就是为什么我不明白这是如何与核心动画页面相关的。

现场演示： http://nicolasrannou.github.io/webapp-core/components/webapp-core/demo.html#welcome/home

所有＆＃34;联系＆＃34;页面包含地图。

使用模板从Google文档中提取数据后创建地图：

        <template repeat="{{row, rowIndex in rows}}">
          <!-- location -->
          <template if="{{ row.gsx$type.$t === 'location'}}">
            <google-map latitude="{{+ row.gsx$latitude.$t}}" longitude="{{+ row.gsx$longitude.$t}}" showCenterMarker zoom="15">
            </google-map>
          </template>
        </template>

那些＆＃34; google-map＆＃34;元素在阴影dom中相当远，并封装在模板中。

我试图在核心动画准备活动中访问然后没有成功：

  transitionPrepare : function(){
    window.console.log(document.querySelectorAll('google-map'));
  }

是否有一种很好的方法可以在阴影dom中访问模板内的元素？

由于

Answer 1

在访问阴影dom内部时，这里有一个来自文档的引用：

...如果元素位于另一个元素深处的另一个阴影树中，则不能轻易地遍历它。如果你真的需要四处寻找，可以使用.shadowRoot：

element.shadowRoot.querySelector('x-other-element')
       .shadowRoot.querySelector('#something');

在没有正确调整大小的地图上，我首先会看一下时间：.resize()应该在动画完成后完成。

谷歌地图聚合物元素的大小错误

1 个答案: