2

私はsenchatouchにまったく慣れていません。目標は、4つのタブを含むTabPanelを持つアプリを作成することです。そのうちの1つはマップである必要があります（他はNestedListと2つのパネルがチャームのように機能します）。私はマップカードを次のように作成しようとしました

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

一部のビューが重なっていて、マップが表示されていないなど、非常に奇妙な結果が得られました。

2番目の試みは、パネルを作成し、それをTabPanelに埋め込んで、マップをパネルに追加することでした。ここで、次のエラーが発生します。

Uncaught TypeError：未定義のプロパティ'ROADMAP'を読み取ることができません。sencha-touch-debug.js：24840

Google Map API V3で述べたように、mapTypeをgoogle.map.MapTypeIDに変更しようとしましたが、成功しませんでした。

私はそれにこだわることができません、あなたが私にいくつかのヒントを与えることができることを願っています！

アプリ：

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; Google JavaScript Maps API V3; Safari 5.1

4

1 に答える 1

2

同様のアプリケーションを実行しています。あなたのタブパネルは完璧です。変更する必要があるのはマップコードだけです...代わりにこれを試してください：

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:{
        }            
    });
)

現在の場所を機能させるには、12以上の例をたどるのに何年もかかりました。これは、GoogleAPIのいくつかのコードとたくさんのものの組み合わせです。

Lemmeは、Googleマップや道順について他に質問があるかどうかを知っています。

乾杯:)サーシャ

于 2011-09-27T04:23:30.973 に答える