Sencha Touch：TabPanel 中的 Ext.Map

Posted 2023-02-26

【中文标题】Sencha Touch：TabPanel 中的 Ext.Map

【英文标题】：Sencha Touch: Ext.Map within TabPanel

【发布时间】：2011-08-12 06:23:02

【问题描述】：

我对煎茶触摸很陌生。目标是创建一个应用程序，它的 TabPanel 包含四个选项卡，其中一个应该是地图（其他是 NestedList 和两个面板，就像一个魅力一样工作）。我试过把地图卡做成这样的

NPApp.views.Mapcard = Ext.extend(Ext.Map,  ...

我最终得到了非常奇怪的结果，比如一些视图重叠并且没有显示地图。

第二次尝试是创建一个面板，将其嵌入到 TabPanel 中并将地图添加到面板中，我收到此错误：

未捕获的类型错误：无法读取未定义的属性“ROADMAP”； sencha-touch-debug.js:24840

我已经尝试将 mapType 更改为 google.map.MapTypeID，就像 Google Map API V3 中提到的那样，但没有成功。

我就是不明白，希望大家给点建议！

应用程序：

NPApp = new Ext.Application(
    name: "NPApp",
    title: "NextPuff",
    icon: 'images/icon.png',
    tabletStartupScreen: 'images/index_default.jpg',
    phoneStartupScreen: 'images/index_default.jpg',
    
    launch: function() 
        this.views.viewport = new this.views.Viewport();
        this.views.homecard = this.views.viewport.getComponent('navi');
    

);

视口：

NPApp.views.Viewport = Ext.extend(Ext.TabPanel, 
    fullscreen: true,
    store: NPApp.npstore,


    initComponent: function() 


        Ext.apply(this, 
            tabBar: 
                dock: 'bottom',
                layout: 
                    pack: 'center'
                
            ,
            items: [
                 xtype: 'homecard', stretch: true,
                 xtype: 'searchcard', id: 'navi' ,
         xtype: 'mapcard' ,
                 xtype: 'morecard' 
            ]
        );
        NPApp.views.Viewport.superclass.initComponent.apply(this, arguments);
    
);

地图卡：

NPApp.views.Mapcard = Ext.extend(Ext.Panel, 
    title: "Map",
    iconCls: "map",


    initComponent: function() 
        var npMap = new Ext.Map(
            title: 'Map',
            useCurrentLocation: true,
            listeners: 
                centerchange : function(comp, map)
                //    refreshMap(map);
                
           ,
            mapOptions : 
                mapTypeControl : false,
                navigationControl : false,
                streetViewControl : false,
                backgroundColor: 'transparent',
                disableDoubleClickZoom: true,
                zoom: 17,
                draggable: false,
                keyboardShortcuts: false,
                scrollwheel: false
           
        );
        Ext.apply(this, 
            defaults: 
                stylehtmlContent: true
            ,
                items: [npMap]
        );
        NPApp.views.Homecard.superclass.initComponent.apply(this, arguments);
    
);


Ext.reg('mapcard', NPApp.views.Mapcard);

煎茶 1.1.0;谷歌 javascript 地图 API V3； Safari 5.1

【参考方案1】：

我有一个类似的应用程序正在运行。你的面板是完美的。您需要更改的只是您的地图代码....试试这个：

var map = new Ext.Map(
        mapOptions : 
            center : center,
            zoom : 20,
            mapTypeId : google.maps.MapTypeId.HYBRID,
            navigationControl: true,
            navigationControlOptions: 
                    style: google.maps.NavigationControlStyle.DEFAULT
                
        ,

        listeners : 
            maprender : function(comp, map)

                var marker = new google.maps.Marker(
                     position: center,
                     //title : 'Sencha HQ',
                     map: map
                );
                setTimeout( function()map.panTo (center); , 1000);
            

        ,

         geo:new Ext.util.GeoLocation(
              autoUpdate:true,
              maximumAge: 0,
              timeout:2000,
              listeners:
                locationupdate: function(geo) 
                  center = new google.maps.LatLng(geo.latitude, geo.longitude);
                  if (map.rendered)
                    map.update(center)
                  else
                    map.on('activate', map.onUpdate, map, single: true, data: center);
                ,
                 locationerror: function (   geo,
                                            bTimeout, 
                                            bPermissionDenied, 
                                            bLocationUnavailable, 
                                            message) 
                    if(bLocationUnavailable)
                        alert('Your Current Location is Unavailable on this device');
                    
                    else
                        alert('Error occurred.');
                          
                 
              
         )

  );

这将创建地图对象并将中心设置为您当前的位置。现在您需要将此对象停靠在 Ext.extend(Ext.Panel() 对象中。我尝试直接创建地图对象，但它需要一个面板才能显示。

所以你的面板代码应该是这样的：

NPApp.views.Mapcard = new Ext.extend(Ext.Panel(
        iconCls : 'map',
        title : 'Map',

        layout: 'card',
        ui: 'light',
        items: [map],
        listeners:
                    
    );
)

我花了很长时间浏览十几个或更多示例才能使当前位置正常工作。这是 Google API 中几个代码和一堆东西的组合。

如果您对 Google 地图或路线有任何疑问，请告诉我。

干杯:) 萨沙