Question

我对聚合物铁列表的了解目前非常低，我想知道从json数据获取lat和lon坐标时计算距离的最佳方法是什么，并为每个项目计算并插入结果

在Jquery中，这很简单例如

select * From t2 
left join t1 on t2.i2 = t1.i1 and t1.v1= t2.v2 
where t1.i1 is null

我有代码来获取用户设备的地理位置和一个函数来计算两个地理位置的距离，并使用我设法计算距离的铁列表演示，但我确定它的错误/漫长的方式谈论它。

代码

$.getJSON(getthis, function(data) {

    $.each(data.items, function(i, value){

    itemlat   = value.lat;
    itemlng   = value.lng;
    dist      = distance(lat,lng,itemlat,itemlng);

    $(".main-content").append("<paper-item>....<span class='dist'>"+dist+"</span></paper-item>");
    });

});

结果

enter image description here

上面的代码一直等到用户Geolocation可用，然后发出带有<body unresolved> <template is="dom-bind"> <iron-ajax id="ajaxPost" url="the-url" last-response="{{data}}"></iron-ajax> <paper-scroll-header-panel class="fit" condenses keep-condensed-header> <paper-toolbar class="tall"> <paper-icon-button icon="arrow-back"></paper-icon-button> <div class="flex"></div> <paper-icon-button icon="search"></paper-icon-button> <paper-icon-button icon="more-vert"></paper-icon-button> <div class="bottom title">iron-list</div> </paper-toolbar> <iron-list items="[[data.items]]" as="item"> <template> <div> <div class="item"> <iron-image style="box-shadow: 0 0 5px rgba(0,0,0,0.50);background-color:gray;width:80px; height:80px;" sizing="cover" src="[[item.path]]" preload></iron-image> <div class="pad"> <div class="primary">[[item.the_title]]</div> <div class="secondary">[[item.info]]</div> <div class="dist secondary dim"><span>[[item.lat]]</span>,<span>[[item.lng]]</span></div> </div> <iron-icon class="bookmark" icon$="[[iconForItem(item)]]"></iron-icon> <iron-icon icon="more-vert"></iron-icon> </div> </div> </template> </iron-list> </paper-scroll-header-panel> </template> <script> var lat,lng; function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { } } function showPosition(position) { lat = position.coords.latitude; lng = position.coords.longitude; } function distance(lat1,lon1,lat2,lon2) { var R = 6371; // km (change this constant to get miles) var devlat = (lat2-lat1) * Math.PI / 180; var dLon = (lon2-lon1) * Math.PI / 180; var a = Math.sin(devlat/2) * Math.sin(devlat/2) + Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) * Math.sin(dLon/2) * Math.sin(dLon/2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; if (d>1) return Math.round(d)+" km"; else if (d<=1) return Math.round(d*1000)+" m"; return d; } function finddist() { setTimeout(function(){ var items = document.getElementsByClassName("dist"); Array.prototype.forEach.call(items, function(elements, index) { var text = elements.textContent if(text.indexOf(',') > -1) { var array = text.split(','); var thislat = array[0]; var thislng = array[1]; var dist = distance(lat,lng,thislat,thislng); elements.innerHTML = dist; } }); }, 0); } document.querySelector('template[is=dom-bind]').iconForItem = function(item) { finddist(); return item ? (item.integer < 10000 ? 'star-border' : 'star') : ''; }; document.addEventListener('paper-header-transform', function(event) { var title = this.querySelector('.title'); var detail = event.detail; var deltaHeight = detail.height - detail.condensedHeight; var scale = Math.max(0.6, (deltaHeight - detail.y) / (deltaHeight / 0.4) + 0.6); Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title); }); function findlocation() { if(lat) { clearInterval(getloc); document.getElementById("ajaxPost").generateRequest(); } else { getLocation(); } } var getloc = setInterval(findlocation, 1000); </script> </body>的铁ajax打印出来自document.getElementById("ajaxPost").generateRequest();中每个项目的json数据的lat和lon的铁列表项。当为其运行的项目打印星形图标<div class="dist secondary dim"><span>[[item.lat]]</span>,<span>[[item.lng]]</span></div>时，通过从finddist();抓取项目坐标来计算距离。

工作正常，但我非常确定这是迄今为止做错的方法。

这是我正在使用的新代码，因为我想在<div class="dist secondary dim"><span>[[item.lat]]</span>,<span>[[item.lng]]</span></div>中移动整个ajax，铁列表例程，并想要一些帮助来计算动态距离

dom-module

由于

Answer 1

哦亲爱的，这么简单

感谢@Ben Thomas提供Computed Binding文档

的链接

<div class="dist secondary dim"><span>{{doThisOnce(item.lat,item.lng)}}</span>

...

Polymer({
      is: 'my-request',

      handleResponse: function () {

      },

      doThisOnce: function(lat,lng) {

       console.log(lat+"=="+lng);
       // calculate distance
      // return result
     }
     });

在列表中创建每个项目的聚合物v1.0铁列表距离计算

1 个答案: