当地图上只显示一个元素时,我遇到了一个问题:
Uncaught Error: Invalid LatLng object: (NaN, NaN)
at L.LatLng (LatLng.js:24)
at Object.unproject (Projection.SphericalMercator.js:29)
at Object.pointToLatLng (CRS.js:31)
at NewClass.unproject (Map.js:899)
at NewClass._getBoundsCenterZoom (Map.js:250)
at NewClass.fitBounds (Map.js:269)
at Class.didCreateLayer (leaflet-map.js:59)
at Class.didInsertParent (base-layer.js:90)
at Object.applyStr [as default] (ember.debug.js:38924)
at tryInvoke (ember.debug.js:39441)
当有两个具有相同位置的标记时,也会发生同样的情况。当有两个不同的位置添加到边界时,一切都是正确的。
在基于我得到的结果的控制器中,我创建了这样的边界:
var latLngs = Ember.A();
this.get('results').forEach(function(value){
latLngs.push(value.get('location'));
});
this.set('bounds', L.latLngBounds(latLngs));
然后在模板中我有这样的事情:
{{#leaflet-map bounds=bounds class="fullscreen-map" as |layers|}}
{{layers.tile url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}
{{#each results as |provider|}}
{{#layers.marker location=provider.location as |marker|}}
{{#marker.popup}}
<h4>{{provider.businessName}}</h4>
<dl>
<dt>{{t 'sp-provider-map.address'}}</dt>
<dd>{{provider.street}} {{provider.houseNumber}}, {{provider.postCode}} {{provider.city}}</dd>
<dt>{{t 'sp-provider-map.rating'}}</dt>
<dd class="rating">{{{sp-provider-rating rating=provider.rating}}}</dd>
</dl>
{{/marker.popup}}
{{/layers.marker}}
{{/each}}
{{/leaflet-map}}
结果的每个元素都具有属性位置,该位置在模型中以下列方式创建:
location: (function() {
return L.latLng(parseFloat(this.get('latitude')), parseFloat(this.get('longitude')));
}).property('latitude', 'longitude'),
可能是什么问题?我应该以不同的方式创建边界吗?
感谢您的帮助!