Polymer 1.0路由:组件没有刷新dom-repeat内的新Lat / Lng值

时间:2021-10-12 21:18:17

I have a customer list. Each of the customer routes to its details page. In the detail page the JSON has lat and lng defined for each record.

我有一个客户名单。每个客户都会路由到其详细信息页面。在详细信息页面中,JSON为每条记录定义了lat和lng。

JSON stirng

JSON stirng

<script>
Polymer({  
  ready: function(){
  this.customers = [
    { "cuname": "msi", "name": "Microsoft India", "addr": "2, Strand Road", "addr2": "Kolkata, IN", "phone": "332.245.9910", "lat": "22.589091", "lng": "88.352359", "branches": [
      { "branch": "Hyderabad", "email": "hydho@cyfoxpapers.com", "phone": "1582012244", "address": "69/A, Twisted Road, Banjara Hills, Hyderabad: 600001", "code": "CPHYD" }]},
    { "cuname": "googindia", "name": "Google India Inc.", "addr": "6/B, Pragati Apartment", "addr2": "Pitampura, New Delhi, IN", "phone": "493.050.2010", "lat": "28.61598", "lng": "77.244382" },
    { "cuname": "gabonint", "name": "Gabon Internationl", "addr": "187 Kabi Kirandhan Road", "addr2": "Bhadrakali, IN", "phone": "983.193.3166", "lat": "22.665979", "lng": "88.348134" },
    { "cuname": "itg", "name": "India Tour Guides", "addr": "115/5 Palash Sarani", "addr2": "Amritsar, India", "phone": "943.390.9166", "lat": "31.604877", "lng": "74.572276" },
    { "cuname": "creatad", "name": "Creative Ad Agency", "addr": "25 BPMB Saranai", "addr2": "McLeodganj, Dharamsala. IN", "phone": "943.390.9166", "lat": "32.232596", "lng": "76.324327" }
    ];
  }
});        
</script>

Route configuration

路线配置

<script>
  window.addEventListener('WebComponentsReady', function () {  
    page('/location/:name', function (data) {
            app.route = 'customer-location';
            app.params = data.params;
    });
  });
</script>

When I come to the detail page (using the route), the element iterates the array properly (within a dom-repeat template) and loads all values. But the map is not refreshing itself to load respective location.

当我进入详细页面(使用路径)时,元素正确迭代数组(在dom-repeat模板中)并加载所有值。但是地图并没有刷新自己来加载相应的位置。

Google map block

谷歌地图块

<div flex id="map-canvas">
  <google-map id="gmap" latitude$="{{getLatitude(item.lat)}}" longitude$="{{getLongitude(item.lng)}}" fit mapType="roadmap" zoom="10">
    <google-map-marker latitude$="{{getLatitude(item.lat)}}" longitude$="{{getLongitude(item.lng)}}" draggable="true" title="Go Giants!"></google-map-marker>
  </google-map>
</div>

I tried both latitude$={{item.lat}} and latitude$={{getLatitude(item.lat)}} (Computed Property) but none worked. It is always showing the last location on map.

我尝试了纬度$ = {{item.lat}}和纬度$ = {{getLatitude(item.lat)}}(计算属性),但都没有效果。它始终显示地图上的最后位置。

getLatitude: function (value) {
   return parseFloat(value);
},

However, if I manually refresh the page by pressing F5 map shows correct location.

但是,如果我通过按F5手动刷新页面,则显示正确的位置。

Note: The map block is placed inside <template is="dom-repeat"></template>.

注意:地图块位于

Can't figure out what is wrong!Looking for an expert help.

无法弄清楚出了什么问题!寻找专家的帮助。

Regards

问候

1 个解决方案

#1


0  

A similar sounding bug was recently fixed https://github.com/GoogleWebComponents/google-map/issues/138

最近修复了一个类似的声音错误https://github.com/GoogleWebComponents/google-map/issues/138

Make sure you have the updated version.

确保您拥有更新的版本。

#1


0  

A similar sounding bug was recently fixed https://github.com/GoogleWebComponents/google-map/issues/138

最近修复了一个类似的声音错误https://github.com/GoogleWebComponents/google-map/issues/138

Make sure you have the updated version.

确保您拥有更新的版本。