Polymer 1.0路由:<google-map>组件没有使用dom-repeat

时间:2015-06-11 12:02:31

标签: google-maps polymer polymer-1.0

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

JSON stirng

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

路线配置

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

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

Google地图块

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

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

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

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

注意:地图块位于<template is="dom-repeat"></template>内。

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

此致

1 个答案:

答案 0 :(得分:0)

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

确保您拥有更新版本。