Ext Js 4 gmappanel动态更改中心

我有一个简单的gmappanel（extjs 4.1.1）。如何更改地图的“中心”并使用新坐标中心刷新我的窗口？Ext Js 4 gmappanel动态更改中心

我的代码是：

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';

没有任何反应。

有什么想法？

谢谢

来源

2013-04-05 Marco

如果你看一下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);

来源

2013-04-05 21:58:46

感谢您的回答这一切都让我想:)为你 – Marco 2013-04-08 07:50:38

我已经修改了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);

来源

2013-04-08 07:57:07 Marco

Ext Js 4 gmappanel动态更改中心

回答

相关问题