1

这是一个 Polymer 1.0、Vaadin-grid details 2.0dev 和 Google Maps 的问题。我在 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>

地图显示完美。但是，当滚动经过详细信息部分，然后返回地图时，地图部分会被空白。不重绘。有没有办法在地图区域重新出现时使地图区域无效或重新绘制？我会假设重绘应该自动发生。

4

1 回答 1

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>

于 2017-03-10T09:11:43.807 回答