![](/img/trans.png)
[英]How to expose callback function for Google Maps when using Browserify?
[英]Google Maps cannot access callback function when using webpack
我正在使用Webpack使用Google Maps構建一個小項目,但是由於Webpack構建腳本的方式,我在Google達到回調函數方面遇到了問題。 我可以使Google達到回調函數的唯一方法是將其手動移入Webpack構建的全局范圍。 我想知道是否仍然可以用不同的方式編寫它,這樣我就不需要手動更改捆綁的文件。
預先建立:
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() { /* ... */ };
就是這樣!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.