Question

我正在使用ember-leaflet在我的Ember应用程序中显示Leaflet地图。在我的例子中，地图用于显示约会地点。用户从列表中选择约会，然后显示相应的约会细节（包括地图）。

选择约会后，详细信息将传递到包含地图的组件。不幸的是，在用户选择约会然后选择另一个约会之后，地图上的坐标不会改变。但是，使用Handlebars输出坐标，我实际上可以看到正在传递不同的坐标。这让我相信地图需要以某种方式“刷新”，以便在地图上显示新的坐标。

我使用这样的组件：{{ember-leaflet geoJSON=geoJSON}}其中geoJSON是包含位置数据的字符串。

我的组件如下：

// components/leaflet-map.js

import Ember from 'ember';
import ENV from '../config/environment';

import EmberLeafletComponent from 'ember-leaflet/components/leaflet-map';
import MarkerCollectionLayer from 'ember-leaflet/layers/marker-collection';
import TileLayer from 'ember-leaflet/layers/tile';

L.Icon.Default.imagePath = '/images/leaflet';

export default EmberLeafletComponent.extend({

  center: Ember.computed(function() {
    return this.get('coordinates');
  }),

  /////////////////////////////////////
  // PROPERTIES
  /////////////////////////////////////

  geoJSON: null,

  /////////////////////////////////////
  // COMPUTED PROPERTIES
  /////////////////////////////////////

  childLayers: Ember.computed('coordinates', function() {

    return [
      TileLayer.extend({
        tileUrl: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
        options: {
          id: 'XXXXXXX',
          accessToken: ENV.APP.MAPBOX_KEY
        }
      }),
      MarkerCollectionLayer.extend({
        content: [{ location: this.get('coordinates') }]
      })
    ];
  }),

  coordinates: Ember.computed('geoJSON', function() {

    if (this.get('geoJSON')) {

      const coordinates = JSON.parse(this.get('geoJSON')).coordinates;

      if (coordinates) {
        return L.latLng(coordinates[1], coordinates[0]);
      }
    }

    return null;
  }),
});

设置断点时，无论用户选择了哪个约会，都只会调用childLayers和coordinates一次。我考虑过建立一个观察者来观察geoJSON属性，但这似乎有些过分。

非常感谢任何帮助！

ember-leaflet：如何刷新组件数据？

0 个答案: