Question

我尝试应用示例Extjs 6 Google Maps，但似乎在GMapPanel.js文件中未定义谷歌错误。任何人都可以帮助我为什么会出现这个错误，我提到我已经花时间在这里和其他论坛上阅读为什么会出现这个错误但没有给我答案？提前谢谢

viewMap.js

Ext.onReady(function () {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Google Map',
        layout: 'fit',
        width: 300,
        height: 300,
        items: [{
                xtype: 'button',
                id: 'show-btn',
                text: 'Click here'
            }]
    });
    Ext.require([
        'Ext.window.*',
        'Ext.ux.GMapPanel'
    ]);
    var mapwin;
    Ext.get('show-btn').on('click', function () {
        // create the window on the first click and reuse on subsequent clicks
        if (mapwin) {
            mapwin.show();
        } else {
            mapwin = Ext.create('Ext.window.Window', {
                autoShow: true,
                layout: 'fit',
                title: 'GMap Window',
                closeAction: 'hide',
                width: 450,
                height: 450,
                border: false,
                x: 40,
                y: 60,
                mapTypeId: 'google.maps.MapTypeId.ROADMAP',
                mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
                mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
                items: {
                    xtype: 'gmappanel',
                    center: {
                        geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
                        marker: {title: 'Fenway Park'}
                    },
                    markers: [{
                            lat: 42.339641,
                            lng: -71.094224,
                            title: 'Boston Museum of Fine Arts',
                            listeners: {
                                click: function (e) {
                                    Ext.Msg.alert('It\'s fine', 'and it\'s art.');
                                }
                            }
                        }, {
                            lat: 42.339419,
                            lng: -71.09077,
                            title: 'Northeastern University'
                        }]
                }
            });

        }
    });
});

GMapPanel.js

    Ext.define('Ext.ux.GMapPanel', {
    extend: 'Ext.panel.Panel',
    
    alias: 'widget.gmappanel',
    
    requires: ['Ext.window.MessageBox'],
    
    initComponent : function(){
        Ext.applyIf(this,{
            plain: true,
            gmapType: 'map',
            border: false
        });
        
        this.callParent();        
    },
    
    onBoxReady : function(){
        var center = this.center;
        this.callParent(arguments);       
        
        if (center) {
            if (center.geoCodeAddr) {
                this.lookupCode(center.geoCodeAddr, center.marker);
            } else {
                this.createMap(center);
            }
        } else {
            Ext.raise('center is required');
        }
              
    },
    
    createMap: function(center, marker) {
        var options = Ext.apply({}, this.mapOptions);
        
        options = Ext.applyIf(options, {
            zoom: 14,
            center: center,
            mapTypeId: 'google.maps.MapTypeId.HYBRID'
        });
        this.gmap = new google.maps.Map(this.body.dom, options);
        if (marker) {
            this.addMarker(Ext.applyIf(marker, {
                position: center
            }));
        }
        
        Ext.each(this.markers, this.addMarker, this);
        this.fireEvent('mapready', this, this.gmap);
    },
    
    addMarker: function(marker) {
        marker = Ext.apply({
            map: this.gmap
        }, marker);
        
        if (!marker.position) {
            marker.position = new google.maps.LatLng(marker.lat, marker.lng);
        }
        var o =  new google.maps.Marker(marker);
        Ext.Object.each(marker.listeners, function(name, fn){
            google.maps.event.addListener(o, name, fn);    
        });
        return o;
    },
    
    lookupCode : function(addr, marker) {
        this.geocoder = new google.maps.Geocoder();
        this.geocoder.geocode({
            address: addr
        }, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
    },
    
    onLookupComplete: function(data, response, marker){
        if (response != 'OK') {
            Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
            return;
        }
        this.createMap(data[0].geometry.location, marker);
    },
    
    afterComponentLayout : function(w, h){
        this.callParent(arguments);
        this.redraw();
    },
    
    redraw: function(){
        var map = this.gmap;
        if (map) {
            google.maps.event.trigger(map, 'resize');
        }
    }
 
});

Answer 1

获取此网站上的密钥https://developers.google.com/maps/documentation/javascript/

之后你必须在地址网址中包含地址网址，只需在url key中输入一个参数= index.html中的密钥然后它会工作。

网址看起来像这样 https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

您必须将其放在<script></script>标记内。

未捕获的ReferenceError：未定义谷歌

1 个答案: