Question

我正在使用GmapPanelv3.js。我可以看到缩放和一切，但为什么地图是空白的？以下是http://jsfiddle.net/anthor/4aAKL/3/

的示例

Ext.onReady(function() {

    var w = Ext.create('Ext.window.Window', {
        title: 'Gmap',
        height: 400,
        width: 600,
        layout: 'border',
        items: [
            {
                title: 'Message List',
                region: 'south',            
                height: 50,

                split: true,
                collapsible: true,
                margins: '0 5 5 5',
                collapsed: true
            },{
                region: 'west',
                title: 'Tree',
                collapsible: true,
                width: 100,
                items: [
                {
                  xtype: 'button',
                  text: 'add',
                  handler: addInfoWindow // reference to event handler function 
                }]
            },{
                xtype: 'gmappanel',
                region: 'center',
                cls: 'reset-box-sizing',
                mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],   
                setCenter: {
                    lat: 3.951941, 
                    long: 102.052002
                }   
            }            
        ]
    });

    /**
     * Just example, do not write code like this!
     * GMApPanel source code 
     * http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js
     */


    // get the map reference
    var map = w.down('gmappanel');   
    function openInfoWindow(content, marker) {
      // create a info window
      var infowindow = new google.maps.InfoWindow({ 
          content: content,
          size: new google.maps.Size(50,50)
      });               

        infoBubble = new InfoBubble({
                content: '<div class="example">Some label</div>',
                //position: new google.maps.LatLng(53.5267, newlong),
                shadowStyle: 1,
                padding: 10,
                borderRadius: 5,
                minWidth: 200,
                borderWidth:1,
                //borderColor: '#2c2c2c',
                disableAutoPan: true,
                hideCloseButton: false,         
                backgroundClassName: 'example',
                //arrowSize: 0,
                 //arrowPosition:7,
                //arrowStyle:3
            });

            infoBubble.open(map.gmap,marker);

            var div = document.createElement('DIV');
            div.innerHTML = 'Hello';
            infoBubble.addTab('A Tab', div);
            infoBubble.addTab('A Tab', div);
      // All GMapPanel instances has the reference to the underlying googlemap object
      // porperty name `gmap`.        
      //infowindow.open(map.gmap, marker);        
    }

    function addInfoWindow() {
        // uses GMapPanel `addMarker` method to create a marker and attached it to tree.
        // Detailes - look at the source code of GMapPanel
        var marker = map.addMarker({
            lat: 53.5267,
            lng: -1.13330,
            title: 'Marker',
            // listeners can be added via configuration or after create 
            // using standard google maps API, i.e.
            // google.maps.event.addListener(marker, 'click', function() {...})            
            listeners: {
                click: function() {                    
                    openInfoWindow('hello', marker);                    
                }
            }
        });

    }

    w.show();
});

Answer 1

我只是改变

setCenter: {
        'lat': 3.951941,
        'lng': 102.052002,
        }

所有问题都解决了！

EXTJS谷歌地图是空白的

1 个答案: