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.
确保您拥有更新的版本。