Question

聚合线工作一段时间然后停止刷新。标记标记可以正常刷新。如果我点击浏览器刷新按钮，多边形线会刷新。我怎样才能解决这个问题？我需要这个，以保持刷新，而无需点击浏览器刷新按钮。新数据是通过使用iron-ajax和http GET获得的。

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/google-map/google-map.html">
<link rel="import" href="../../bower_components/google-map/google-map-point.html">
<link rel="import" href="../../bower_components/google-map/google-map-poly.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="ra-app">
  <template>
    <style>
      :host {
        display: block;
      }
      google-map {
      display: block;
      height: 100vh;
      width: 100%;
      text-align: center;
      font-size: 1.2em;
    }
    </style>

    <google-map latitude="45.559" longitude="-122.65" version="3.exp" zoom="12" >
      <template is="dom-repeat" items="[[marker_data]]" as="vehicle">
        <google-map-marker icon=[[vehicle.icon]]
                           latitude=[[vehicle.current_lat]] longitude=[[vehicle.current_lon]]  title=[[vehicle.text]]>
        </google-map-marker>
        <google-map-poly>
          <template is="dom-repeat" items="[[vehicle.recent_positions]]" as="location">
            <google-map-point latitude=[[location.lat]] longitude=[[location.lon]]></google-map-point>
          </template>
        </google-map-poly>
      </template>

      <google-map-marker icon="http://maps.google.com/mapfiles/kml/shapes/bus.png"
                           latitude=45.54843 longitude=-123.60  title="arrggghhhh!!!!!">
        <img src="http://maps.google.com/mapfiles/kml/shapes/bus.png">
      </google-map-marker>

    </google-map>

    <iron-ajax
      id="getMarkers"
      url="http://localhost:9001/vehicle-markers"
      handle-as="json"
      on-response="updateMarkers">
    </iron-ajax>

  </template>

  <script>
    class MyApplication extends Polymer.Element {
      static get is() { return 'ra-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'ra-app'
          },
          lat1: {
              type: Number,
              value: 37.79
          },
          count:{
            type: Number,
            value: 1
          },
          marker_data: {
            type: Array,
          }
        };
      }
      ready(){
        super.ready();
        var self = this;
        self.$.getMarkers.generateRequest();
        setInterval(function(){

          // debug
          console.log('my interval callback' + self.lat1);
          self.lat1 = 37.79 + .01 * (self.count % 5);
          self.count += 1

          self.$.getMarkers.generateRequest();

          }, 1000)

      }
      updateMarkers(data){
        this.marker_data = data.detail.response;
        console.log(this.marker_data)
        var i = 0;
        var len = this.marker_data.length;
        for (; i < len;i++ ) {
          // Eliminate null values in recent_positions array
          this.marker_data[i].recent_positions = this.marker_data[i].recent_positions.filter(Boolean);

          console.log('In updateMarkers, data from server:' + this.marker_data[i].current_lat + ' ' +
            this.marker_data[i].current_lon);
          console.log('Google maps version: ' + google.maps.version)
        }

      }
    }

    window.customElements.define(MyApplication.is, MyApplication);
  </script>

</dom-module>

Answer 1

您是否尝试过使用数组变异方法。聚合物没有注意到数组中的更改，因此您必须调用notifyPath或使用array mutation methods。在您的情况下，这意味着您应该使用this.set方法

嵌套dom-repeat中的聚合物google-map-point停止刷新

1 个答案: