Sencha Touch：Ext. TabPanel内のマップ

Question

私は非常に感銘を受けたです。目標は、4つのTabを含むTabPanelを持つアプリケーションを作成することです。その1つはマップでなければなりません（他はNestedListと2つのパネルが魅力的に機能します）。私はマップカードを作成しようとしました NPApp.views.Mapcard = Ext.extend（Ext.Map、{... 私はいくつかのビューが重複していて、マップが表示されていないなど、私はすでににmapTypeはを変更しようとしました

Uncaught TypeError: Cannot read property 'ROADMAP' of undefined; sencha-touch-debug.js:24840

..

2回目の試行は、タブパネルにそれを埋め込むと、私はこのエラーを取得パネルにマップを追加し、パネルを作成しました。 google.map.MapTypeIDはGoogle Maps API V3に記載されているように成功しません。

私はちょうどそれにハングアップすることはできません、あなたに願っています私にいくつかのヒントを与えることができます！

アプリケーション：

​​

ビューポート：

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

Mapcard：

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;サファリ5.1

おかげ ギュンター

Answer 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（{}）オブジェクトにドッキングする必要があります.Iveはマップオブジェクトを直接作成しようとしましたが、表示するパネルが必要です。

そのような何か：

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

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

それは、これはいくつかのコードと、GoogleのAPIにおける原料の束を組み合わせたものである私の現在の位置を動作させるためにダース以上の例を通して行くの年齢を取った

。

Googleマップやルートについてさらにご質問がありましたらお知らせください。

乾杯： サシャ