map不以tabpanel extjs为中心

时间:2013-01-28 20:13:29

标签: extjs extjs4

我有一个带有三个标签的标签面板。第三个选项卡是显示地图。我正在获取所需控件的地图,但它没有居中。点位于比标签中心更靠西北的位置。所以我必须拖动地图才能将该点指向Tab的中心。

标签面板代码

var infoPanel = new Ext.tab.Panel({
    id: 'guestTabPan',
    xtype: 'tabpanel',
    title: 'Site Information',
    autoDestroy: false,
    items:[
      {
        id: 'siteTab',
        title:'Site',
        items:[
           ....
        ]
      },{
        title: 'Pressure',
        id: 'pressureTab',
        items:[
          .....
        ]
      },{
        title: 'Map',
        id: 'mapTab',
        items:[ 
          {
            xtype: "panel",
            id: 'mapTabPanel',
            height: 1000,                         
            layout: 'fit',
            items:[
            ]
          }
        ]
      }
    ]
  });

地图代码

 var smallGoogleMap = {xtype: 'gmappanel',id :'gSmallSiteMap',width:'100%',height:1000,
            zoomLevel:10,
            gmapType: 'map',
            mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
            mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
            setCenter: {
              lat: SiteLat,
              lng: SiteLng,
              marker:{ title: SiteTitle}
            }

};

Ext.getCmp('mapTabPanel').add(smallGoogleMap);

任何猜测?

1 个答案:

答案 0 :(得分:0)

如果在激活选项卡时调用this.getMap()。生成GMapPanel.js的setcenter,这有助于使地图居中。这个对我有用。现在setCenter不是单独的方法,至少不是我所拥有的js文件,我在地图选项卡的激活事件中添加了地图的中心点,如下所示,

{
   title: 'Map',
   id: 'mapTab',
   listeners: {
    'activate':{
       fn:function(){
         var gsm = Ext.getCmp('gSmallSiteMap');
         var mpoint = new GLatLng(mymarker.lat,mymarker.lng);
         gsm.addMarker(mpoint,mymarker.marker,false,true, mymarker.listeners);
       }
     }  
   },
   items:[ 
          ......
         ]
}