Sencha Touch - 如何从控制器重新初始化地图视图

时间:2014-05-11 10:00:03

标签: sencha-touch sencha-touch-2 leaflet

我想在控制器中执行某个操作后重新初始化我的地图视图。

这是我的mapview:

Ext.define("App.view.MapView", {
extend: 'Ext.Container',
requires: [
    'Ext.device.Geolocation',
    'Ext.MessageBox'
],
xtype: 'mapview',

constructor: function () {
    this.callParent(arguments);
    this.element.setVisibilityMode(Ext.Element.OFFSETS);
    this.on('painted', this.renderMap, this);
},

renderMap: function(){
        var me = this,
            lat = localStorage.getItem('latitude'),
            lng = localStorage.getItem('longitude'), 
            geo = [lat, lng];

        var map = L.map('map', {
            center: geo, 
            zoom: 13
        });

        var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);    

        var marker = L.marker(geo, {
            draggable: true,
            title: 'Your position'
        }).addTo(map);
}
});

如何获取并重置(重新初始化)我的地图视图?我试图在控制器中引用mapview:

config: {
    refs: {
        mapCmp: 'mapview',
    },

然后这样称呼它:

this.getApplication().getMapCmp.reset();

但它没有奏效 - 我的功能未定义&#39;。基本上我需要它再次初始化,就像应用程序启动时一样。

请告知。

1 个答案:

答案 0 :(得分:0)

您的函数未定义消息,因为您的视图中未定义reset()函数。

但是,如果要初始化MapView,则需要使用initialize()函数。将其添加到您的文件中:

Ext.define("App.view.MapView", {
extend: 'Ext.Container',
requires: [
    'Ext.device.Geolocation',
    'Ext.MessageBox'
],
xtype: 'mapview',

constructor: function () {
    this.callParent(arguments);
    this.element.setVisibilityMode(Ext.Element.OFFSETS);
    this.on('painted', this.renderMap, this);
},

initialize: function() {
    // This function is launched each time the application starts up
}

renderMap: function(){
        var me = this,
            lat = localStorage.getItem('latitude'),
            lng = localStorage.getItem('longitude'), 
            geo = [lat, lng];

        var map = L.map('map', {
            center: geo, 
            zoom: 13
        });

        var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);    

        var marker = L.marker(geo, {
            draggable: true,
            title: 'Your position'
        }).addTo(map);
},
});