Question

这是一个Polymer 1.0，Vaadin-grid详细介绍了2.0dev和谷歌地图的问题。我有一个Vaadin-grid-detail的谷歌地图

    <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

以下是在google-map中使用vaadin-grid#alpha4组件的示例，所有工作正常，无需额外重新绘制：

<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>

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

1 个答案: