Ext Js 4 gmappanel動態更改中心

Question

我有一個簡單的gmappanel（extjs 4.1.1）。 如何更改地圖的「中心」並使用新座標中心刷新我的窗口？

我的代碼是：

Ext.Loader.setConfig({ 
     enabled : true 
    }); 
Ext.require(['Ext.window.*', 'Ext.ux.GMapPanel']); 

Ext.define('AM.view.gmapwindow.GoogleMap', { 
extend : 'Ext.window.Window', 
alias : 'widget.gmapw', 
autoShow : true, 
title : 'map', 
closeAction : 'hide', 
width : 460, 
height : 500, 
border : false, 
x : 40, 
y : 60, 
items : [{ 
      layout : { 
       type : 'hbox', 
       align : 'stretch' 
      }, 
      flex : 1, 
      items : [{ 
         xtype : 'textfield' 
        }, { 
         xtype : 'button', 
         handler: function() { 
//-------------------- 
//modify here the center 
//geoCodeAddr:'Suisse Romande, Avenue de la Gare, Sion, Svizzera' 
//--------------------- 
          } 
        }] 
     }, { 
      width : 450, 
      layout : 'fit', 
      height : 450, 
      border : false, 
      items : { 
       xtype : 'gmappanel', 
       center : { 
        geoCodeAddr : '4 Yawkey Way, Boston, MA, 02215-3409, USA' 

       }, 

       markers : [] 
      } 
     }] 

}）;

地圖很好地顯示，但如果我試圖改變中心編輯

geoCodeAddr

用下面的代碼

this.up('gmapw').down('gmappanel').center.geoCodeAddr='Suisse Romande, Avenue de la Gare, Sion, Svizzera'; 

沒有任何反應。

有什麼想法？

謝謝

Answer 1

如果你看一下GMapPanel.js，你會看到，在afterFirstLayout()，geoCodeAddr是創建地圖時使用。因爲afterFirstLayout()將不會再被調用，所以在佈局後設置它不會做任何事情。

您應該對您的地址進行地址解析並使用它在地圖上設置中心。類似下面的內容應該可以工作：

var map = this.gmap; 
var geocoder = new google.maps.Geocoder(); 
var request = {address: 'Suisse Romande, Avenue de la Gare, Sion, Svizzera'}; 
var callBack = function(geocoderResults, geocoderStatus) { 
    if(geocoderStatus === 'OK') { 
     var location = geocoderResults[0].geometry.location; 
     var latLng = new google.maps.LatLng(location.lat(), location.lng()); 
     map.setCenter(latLng); 
    } 
} 
geocoder.geocode(request,callBack); 

Answer 2

我已經修改了Arun V的答案，以使其完全適用於我的示例。

再次感謝您阿倫五：

var request = {address: 'Suisse Romande, Avenue de la Gare, Sion, Svizzera'}; 
var callBack = function(geocoderResults, geocoderStatus) { 
    if(geocoderStatus === 'OK') { 
     var location = geocoderResults[0].geometry.location; 
     var latLng = new google.maps.LatLng(location.lat(), location.lng()); 
     //get current Id from document useful if you have more than one map 
     //you can't use "this.gmap" reference here because it's not in your scope 
     var idMapW = this.document.activeElement.id; 
     Ext.ComponentQuery.query('#'+idMapW)[0].down('gmappanel').gmap.setCenter(latLng); 
     } 
    }; 
    this.up('gmapw').down('gmappanel').geocoder.geocode(request,callBack);