Question

您好我在这里建议使用sencha touch实现谷歌地图： google maps implementation in sencha touch 2 (the MVC way)

但是，当地图出现时，它首先显示默认位置（美国某处），然后再次重新渲染以根据我的配置显示地图。我怎么能避免这个？

Ext.define('App.view.Map', {
extend: 'Ext.Map',
xtype: 'map',
useCurrentLocation: false,
config: {
  layout: 'fit',
  iconCls: 'icon-location',
  title: 'Location',
  styleHtmlContent: true,
    items: {
        docked: 'top',
        xtype: 'titlebar',
        title: 'Location'
    }
},
mapOptions: {
    center: new google.maps.LatLng(<value>, <value>),
    disableDefaultUI: true
},
constructor: function(config) {
    this.callParent(config);
    if (!(window.google || {}).maps) {
            this.setHtml('<p id="maperror">Internet Connection Required!</p>');
    }
}
});

Answer 1

您可以通过在地图的“mapOptions”配置中添加“center”选项来设置起始位置。

{
    xtype: 'map',
    mapOptions: {
       center: new google.maps.LatLng(-34.397, 150.644)
    }
}

您可以覆盖Ext.Map类并添加自己的消息。

Ext.define('MyApp.overrides.Map', {
    constructor: function() {
       this.callParent(arguments);
       // this.element.setVisibilityMode(Ext.Element.OFFSETS);

        if (!(window.google || {}).maps) {
            // do your own thing here
        }
    }
});

Answer 2

您定义了地图视图和扩展Ext.Map，以便视图成为地图，当您为视图指定xtype时，它不应该是预定义的xtype，如地图，面板，按钮等。

您应该了解Ext class system并尝试使用此代码。

Ext.define('myapp.view.Map', {
    extend: 'Ext.Map',
    xtype: 'mymap',
    config: {
        layout: 'fit',
        iconCls: 'icon-location',
        title: 'Location',
        useCurrentLocation: false,
        styleHtmlContent: true,
        items: [{
            docked: 'top',
            xtype: 'titlebar',
            title: 'Location'
        }],
        mapOptions: {
          center: new google.maps.LatLng(<value>, <value>),
          disableDefaultUI: true
       }
    },
    constructor: function(config) {
        this.callParent(config);
        if (!(window.google || {}).maps) {
            this.setHtml('<p id="maperror">Internet Connection Required!</p>');
        }
    }
});

谷歌地图sencha touch 2配置

2 个答案: