GmapPanel 无法缩放级别 - EXTJS 4答案

【问题标题】：GmapPanel Can't zoomLevel - EXTJS 4GmapPanel 无法缩放级别 - EXTJS 4
【发布时间】：2013-02-19 07:48:21
【问题描述】：

Ext.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.window.MessageBox',
    'Ext.window.*',
    'Ext.ux.GMapPanel'
]);

var layout = Ext.create('Ext.panel.Panel', {
                //renderTo: 'layout',
                width: window.innerWidth,
                height: window.innerHeight,
                //title: 'Border Layout', //no title will be blank
                layout: 'border',
                items: [{
                    title: 'Message List',
                    region: 'south',     // position for region
                    xtype: 'panel',
                    height: 100,
                    split: true,         // enable resizing
                    collapsible: true,
                    margins: '0 5 5 5',
                    collapsed: true
                },tree,{
                    //title: 'Map',
                    region: 'center',     // center region is required, no width/height specified
                    xtype: 'gmappanel',
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],   
                    zoomLevel: 2,
                    gmapType: 'map'
                }],
                renderTo: Ext.getBody() //get the body and display Layout at there
            });

问题

为什么我的代码不能缩放，gmaptype 与地图和小地图？即使用 x,y 坐标设置中心也不行。请帮忙谢谢！

【问题讨论】：

标签： javascript ajax google-maps extjs extjs4

【解决方案1】：

你要添加

    setCenter: {
        'lat': 37.4419,
        'lng': -122.1419,
        marker:{ title: 'Palo Alto'}
    }

在 xtype:'gmappanel' 中。

【讨论】：

【解决方案2】：

我也面临同样的问题，我通过在以下代码部分中更改 GMapPanel.js 的缩放来解决这个问题：

options = Ext.applyIf(options, {
        zoom: 4,         // <-- change this to whatever you want
        center: center,
        mapTypeId: google.maps.MapTypeId.HYBRID
    });

注意：上面的代码我没有添加到GMapPanel.js，它已经在那里了，找到它并更改缩放级别。

【讨论】：

【解决方案3】：

options = Ext.applyIf(options, {
    zoom: this.zoom || 14,      // FIX 
    center: center,
    mapTypeId: google.maps.MapTypeId.HYBRID
});

在创建 xtype 时使用 var zoom 来更改默认缩放值

【讨论】：

【解决方案4】：

我认为这就是你想要做的。您需要在“mapOptions”对象中包含“zoomLevel”。这是一个例子：

xtype: 'gmappanel',
height: 300,
width: 300,
mapOptions: {
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    //...etc
}

【讨论】：