Javascript 使用webpack时,Google Maps无法访问回调函数
我正在使用webpack使用GoogleMaps构建一个小项目,由于webpack构建脚本的方式,我在Google访问回调函数时遇到了问题。让google访问回调函数的唯一方法是手动将其移动到webpack构建的全局范围。我想知道是否有其他方法可以编写它,这样我就不需要手动更改捆绑文件 预构建:Javascript 使用webpack时,Google Maps无法访问回调函数,javascript,google-maps,callback,webpack,Javascript,Google Maps,Callback,Webpack,我正在使用webpack使用GoogleMaps构建一个小项目,由于webpack构建脚本的方式,我在Google访问回调函数时遇到了问题。让google访问回调函数的唯一方法是手动将其移动到webpack构建的全局范围。我想知道是否有其他方法可以编写它,这样我就不需要手动更改捆绑文件 预构建: import {apiKey} from './apiKey'; document.addEventListener('DOMContentLoaded', function(){ let lang
import {apiKey} from './apiKey';
document.addEventListener('DOMContentLoaded', function(){
let lang;
if(document.querySelectorAll('#map').length > 0){
if(document.querySelector('html').lang){
lang = document.querySelector('html').lang;
} else {
lang = "en";
}
let js_file = document.createElement('script');
js_file.type = "text/javascript";
js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMapCallback&signed_in=true&key=' + apiKey + '&language=' + lang;
document.getElementsByTagName('head')[0].appendChild(js_file);
};
});
let map ;
function initMapCallback() {
map = new google.maps.Map(document.getElementById("map"), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
;
建造后:
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var _apiKey = __webpack_require__(1);
var map = void 0;
function initMapCallback() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
};
document.addEventListener('DOMContentLoaded', function () {
var lang = void 0;
if (document.querySelectorAll('#map').length > 0) {
if (document.querySelector('html').lang) {
lang = document.querySelector('html').lang;
} else {
lang = "en";
}
var js_file = document.createElement('script');
js_file.type = "text/javascript";
js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMapCallback&signed_in=true&key=' + _apiKey.apiKey + '&language=' + lang;
document.getElementsByTagName('head')[0].appendChild(js_file);
};
});
/***/ },
/* 1 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var apiKey = exports.apiKey = 'something';
/***/ }
/******/ ]);
在IIFE中使用webpack时,所有代码都在全局范围之外运行。如果您想显式地使某些内容可用,您可以自己将其附加到窗口 只需在函数定义后添加以下内容:
window.initMapCallback = initMapCallback;
或者在一行中完成:
window.initMapCallback = function initMapCallback() { /* ... */ };
就这样 在生活中使用webpack时,所有代码都在全局范围之外运行。如果您想显式地使某些内容可用,您可以自己将其附加到窗口 只需在函数定义后添加以下内容:
window.initMapCallback = initMapCallback;
或者在一行中完成:
window.initMapCallback = function initMapCallback() { /* ... */ };
就这样