google maps sencha touch 2 配置

Posted 2023-02-26

【中文标题】google maps sencha touch 2 配置

【英文标题】：google maps sencha touch 2 configuration

【发布时间】：2013-08-19 11:01:40

【问题描述】：

您好，我正在按照此处的建议在 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>');
    

);

【问题讨论】：

查看我的更新答案

【参考方案1】：

你定义了地图视图并扩展了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>');
        
    
);

【讨论】：

谢谢！它起作用了...我的错误是我将 mapOptions 节放在了配置之外，因此它被忽略了...肯定会观看视频...

@bert ya，这也是我说你需要学习班级系统的原因。

【参考方案2】：

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

    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
        
    
);

【讨论】：

这个覆盖方法有效，谢谢......我之前已经解决了它并编辑了代码，但你看起来真的很快:)