聚合物vaadin详细谷歌地图，滚动后如何刷新地图

Question

这是一个聚合物1.0，Vaadin网格细节2.0dev和谷歌地图的问题。 我有一个Vaadin网格细节

<vaadin-grid id="grid-row-details" items="[[bindata]]" size="200"> 

    <template class="row-details"> 
     <div class="details"> 
     <!--<img src="[[item.user.picture.large]]">--> 

<div style="width: 60%; height: 50%; background-color: blue; float:right;"> 
<google-map 
     latitude=[[item.ValLat]] 
     longitude=[[item.ValLong]] 
     fit-to-marker 
     api-key="AIzaasasasasb-Z7easasbhl_dy8DCXuIuDDRc"> 
      <google-map-marker 
       latitude=[[item.ValLat]] 
       longitude=[[item.ValLong]] 
       draggable="true" 
       zoom="20"> 
      </google-map-marker> 
</google-map> 
</div> 
<div style="width: 40%; height: 50%; background-color: grey; float:left;"> 
       <p>Hi! My name is [[item.$key]]!</p> 
       <p>BIN WEEK NUMBER = [[item.BinScanWeekNumber]] </p> 
</div> 
     </div> 
    </template> 

的地图显示完美一个谷歌地图。 但是，当滚动通过细节部分，然后回到地图时，地图部分将被清空。不重绘。 有没有办法在地图区域重新进入视图时使地图区域无效或重新绘制？ 我会假设重绘应该会自动发生。

Answer 1

下面是一个使用vaadin-grid#alpha4内google-map技术的例子，都没有额外的重新绘制工作正常：

<base href="https://polygit.org/vaadin-grid+vaadin+v2.0.0-alpha4/google-map+GoogleWebComponents+1.2.0/polymer+polymer+v1.7.0/components/"> 
 

 
<link rel="import" href="vaadin-grid/vaadin-grid.html"> 
 
<link rel="import" href="google-map/google-map.html"> 
 

 
<vaadin-grid-google-map></vaadin-grid-google-map> 
 

 
<dom-module id="vaadin-grid-google-map"> 
 
    <template> 
 
    
 
    <vaadin-grid id="grid" items="[[items]]" on-active-item-changed="_onActiveItemChanged"> 
 
     
 
     <template class="row-details"> 
 
     <div style="width: 100%; height: 200px;"> 
 
      <google-map fit-to-marker api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc"> 
 
      <google-map-marker latitude="37.78" longitude="-122.4" draggable="true"></google-map-marker> 
 
      </google-map> 
 
     </div> 
 
     </template> 
 
    
 
     <vaadin-grid-column> 
 
     <template>[[item]]</template> 
 
     </vaadin-grid-column> 
 

 
    </vaadin-grid> 
 
    
 
    </template> 
 

 
    <script> 
 
    Polymer({ 
 
     is: 'vaadin-grid-google-map', 
 

 
     ready: function() { 
 
     this.items = [...Array(20).keys()] 
 
     }, 
 

 
     properties: { 
 
     items: { 
 
      type: Array 
 
     } 
 
     }, 
 
     
 
     _onActiveItemChanged: function(e) { 
 
     this.$.grid.expandedItems = [e.detail.value]; 
 
     }  
 
    }) 
 
    </script> 
 
</dom-module>