未捕獲的ReferenceError：未定義google

Question

我嘗試應用示例Extjs 6 Google Maps，但似乎未在GMapPanel.js文件中定義錯誤google。 有人可以幫助我為什么顯示此錯誤，我提到我已經花了一些時間在這里閱讀，並且在其他論壇上也看到了為什么出現此錯誤但沒有任何答案的原因？ 提前致謝

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 = your key.index.html中的參數一樣，將地圖網址包含在內
然后它將起作用。

網址看起來像這樣
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

您必須將其放在<script></script>標記內。